logo标签列表

HTML表格列等宽

htmlhtml-table
9
使用以下代码后，我发现列的大小不同（尤其是最后一列很小），我希望所有三列的大小相同。谢谢。
<html>
<body>
<h4>Two rows and three columns:</h4>
<table border="1" width="100%" height="400" align="top">
<tr style="height: 1">
  <td>
   <table width="100%" border="2" height ="100" align="top">
     <tr>
       <td>1-1</td>
       <td>1-2</td> 
     </tr>
     <tr>
       <td>1-3</td>
       <td>1-4</td>
     </tr>
   </table>
 </td> 
  <td>
   <table width="100%" border="2" height ="100" align="top">
     <tr>
       <td>2-1</td>
       <td>2-2</td> 
     </tr>
     <tr>
       <td>2-3</td>
       <td>2-4</td>
     </tr>
   </table>
<td>
   <table width="100%" border="2" height ="100" align="top">
     <tr>
       <td>3-1</td>
     </tr>
     <tr>     
       <td>3-2</td>
     </tr>
   </table>
 </td> 
</tr>
<tr style="vertical-align: top">
 </td> 
  <td>
   <table width="100%" border="2" height ="100">
     <tr>
       <td>4-1</td>
       <td>4-2</td> 
     </tr>
     <tr>
       <td>4-3</td>
       <td>4-4</td>
     </tr>
</table>
 <td>
   <table width="100%" border="2" height ="100">
     <tr>
       <td>5-1</td>
       <td>5-2</td> 
     </tr>
     <tr>
       <td>5-3</td>
       <td>5-4</td>
     </tr>
   </table>
<td> 
   <table width="100%" border="2" height ="100">
     <tr>
       <td>6-1</td>
     </tr>
     <tr>
       <td>6-3</td>
     </tr>
   </table>
</body>
</html>
你尝试在根td列上定义宽度了吗？ - home
1
style="height: 1" 是什么意思？ - Mr Lister
style="height: 1" 不起作用。只有0可以没有单位。 - stefan bachert
5个回答
23

在您的表格中插入一个colgroup元素：

<table>
  <colgroup>
    <col style="width: 33%" />
    <col style="width: 33%" />
    <col style="width: 33%" />
  </colgroup>
  <tr>
...
  </tr>
</table>
这只适用于3列吗？如果我想要更多的列，该怎么办？ - m4n07
@m4n07 这适用于任何列数。只需为每个所需的列附加一个 col，并相应调整宽度即可。 - Sirko
目前我有7列，但这可能会改变，但每当它改变时，我都必须更改我的代码。即使列数发生变化，最好也能够在不进行HTML更改的情况下继续进行。 - m4n07
@m4n07，也许你应该添加一段JS代码来为你插入colgroup。我不知道有什么方法可以处理可变数量的列。 - Sirko
谢谢 Sirko！我还有一个问题，是否可以在内部表格1和2之间添加一点间距。 - m4n07
@m4n07 你试过在内部表格上设置 margin 或者在周围的 <td> 上设置 padding 吗？ - Sirko
3

需要考虑的几个修复

<table style="table-layout: fixed; width: 100%;"> <!- set table layout to fixed and width to full width -->
    <colgroup>
        <col style="width: auto" /> <!- takes the remaining space -->
        <col style="width: 33.3333%" /> <!- or use 33.3333% for all instead if you want to occupy full width -->
        <col style="width: 33.3333%" />
    </colgroup>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
    ...
</table>
2

只需将第一级表格的每个<td>设置为width="33%"

0
你可以尝试将列的宽度设置为绝对值，而不是相对值：
< TD WIDTH=200>

试着看看这个链接。

-2

另一种方法是将表格的CSS宽度设置为100%，例如：

table { width:100% }

这些单元格应该继承这个属性并且大小相等。这样你就可以更灵活地适应不同数量的列。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接