html表格列寬
[英]html table column width
問題描述
如何修復底部列？ 寬度50％不能正常工作。 我想做2行和3行底部相同的寬度。
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body> <table> <tr> <td style="width:50%;">Cell A</td> <td style="width:50%;">Cell B</td> </tr> <tr> <td>Cell A</td> <td>Cell B</td> <td>Cell B</td> </tr> </table> </body> </html>
3 個解決方案
解決方案1
3 2018-10-17 21:13:40
表列是相互連接的。 這樣，如果您放置一些迫使單元格變寬的內容，則整個列將變寬。
這意味着所有行必須具有相同數量的單元格。 但是，可以使用colspan屬性合並2個或更多單元。
如果要在一行上具有2列，而在另一行上具有3列，則可能需要設置6個單元格並在兩種情況下使用colspan ：
td { border: 1px solid #eee; text-align: center; }
<table style="width: 100%;"> <tr> <td colspan="3" style="width:50%;">Cell A</td> <td colspan="3" style="width:50%;">Cell B</td> </tr> <tr> <td colspan="2">Cell A</td> <td colspan="2">Cell B</td> <td colspan="2">Cell C</td> </tr> </table>
我將它們分為6列，因為它更易於可視化。 但是，實際上，兩邊的兩列可以合並，因為它們總是合並在一起的：
td { border: 1px solid #eee; text-align: center; }
<table style="width: 100%;"> <col width="33.3333%"> <col width="16.6667%"> <col width="16.6667%"> <col width="33.3333%"> <tr> <td colspan="2">Cell A</td> <td colspan="2">Cell B</td> </tr> <tr> <td>Cell A</td> <td colspan="2">Cell B</td> <td>Cell C</td> </tr> </table>
解決方案2
1 2018-10-17 21:13:25
在第一行第二列上使用colspan='2' 。
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body> <table> <tr> <td style="width:50%;">Cell A</td> <td colspan='2' style="width:50%;">Cell B</td> </tr> <tr> <td>Cell A</td> <td>Cell B</td> <td>Cell B</td> </tr> </table> </body> </html>
解決方案3
0 2018-10-17 21:22:08
您可以使用colspan告訴瀏覽器要一個單元格占用多少列：
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body> <table width="100%"> <tr> <td>Cell A</td> <td colspan="2">Cell B</td> </tr> <tr> <td>Cell A</td> <td>Cell B</td> <td>Cell B</td> </tr> </table> </body> </html>
HTML表中的列寬
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.