Question

我们在html页面上有一个表，其中包含大约20列。我们无法调整每个<td>的宽度，之后我们发现由于页面过于专注于列，因此浏览器（chrome和explorer）会覆盖<td>的width属性并打包{ {1}}块接近关闭。有没有办法调整<td>宽度，以便<td>块足够分开。

提前感谢。

Answer 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>

Answer 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/

html td的宽度

2 个答案: