html td 的宽度答案

【问题标题】：Width of html tdhtml td 的宽度
【发布时间】：2014-01-03 13:30:28
【问题描述】：

我们在 html 页面上有一个包含大约 20 列的表格。我们无法调整每个<td> 的宽度，后来我们发现由于页面过于拥挤，浏览器（chrome 和资源管理器）覆盖了<td> 的宽度属性并将<td> 块关闭关闭。有没有办法调整<td> 宽度，使<td> 块足够分开。

提前致谢。

【问题讨论】：

你能贴一些代码吗？你可以在你知道的tds 上设置width
这个链接会对你有所帮助.. *.com/help/how-to-ask

标签： html css

【解决方案1】：

您可以使用<Col> 标签调整每列的宽度。
示例：

<table border="1" width="100%">
  <col width="100">
  <col width="75">
  <tr>
    <th>Name</th>
    <th>Place</th>
  </tr>
  <tr>
    <td>Venkat</td>
    <td>India</td>
  </tr>
  <tr>
    <td>Peter</td>
    <td>USA</td>
  </tr>
</table>

【讨论】：

<col width="100"> 和<col width="75"> 不会因为在<table> 中设置width="100%" 而影响
你试试看吧.. :)
它对我来说很好用。

【解决方案2】：

使用 CSS。

如果你想给所有td 赋予相同的宽度，你可以试试下面的代码。

<style type='text/css'>
    .mytable td,.mytable th{
        width:100px;
    }
</style>

<table border="1" class="mytable">
  <tr>
    <th>Name</th>
    <th>Place</th>
  </tr>
  <tr>
    <td>Venkat</td>
    <td>India</td>
  </tr>
  <tr>
    <td>Peter</td>
    <td>USA</td>
  </tr>
</table>

如果所有td 都有不同的尺寸，你可以试试下面的代码，

<style type='text/css'>
    .mytable .firstth{
        width:100px;
    }
    .mytable .secondth{
        width:250px;
    }
</style>

<table border="1" class="mytable">
  <tr>
    <th class='firstth'>Name</th>
    <th class='secondth'>Place</th>
  </tr>
  <tr>
    <td>Venkat</td>
    <td>India</td>
  </tr>
  <tr>
    <td>Peter</td>
    <td>USA</td>
  </tr>
</table>

很可能给th 提供宽度会正确排列对应的td。

http://jsfiddle.net/jdp7v/ 上的演示

【讨论】：