Question

我有上图所示的上表。我想修复吉尔和史密斯之间的空间。以最后一个表为例。不知道怎么解释这个，因为英语不是我的母语。

http://i.stack.imgur.com/IC4CP.png

修改

我的代码

  <table>
    <tr>
      <th>Jill</td>
      <th>Smith</td> 
      <th>Santa</td>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith5555</td> 
      <td>50555555555</td>
    </tr>
    <tr>
      <td>Jillffff</td>
      <td>Smith5555</td> 
      <td>50555555555</td>
    </tr>
    <tr>
      <td>Jill5555</td>
      <td>Smith5555</td> 
      <td>50555555555</td>
    </tr>
  </table>

CSS

table, th, td {
    width:100%;
    border:1px solid #ddd;
    padding:10px;
}
table {
    border-collapse:collapse;
}
table td {
    font-size:13px;
}
table th {
    text-align:left;
    font-size:14px;
    text-transform:uppercase;
    font-weight:normal;
    background:#36c;
    color:#fff;
}
tr:nth-child(odd) {
    background-color: #f2f2f2;
}

Answer 1

这就是你的问题所在，

 table, th, td {
    width:100%; //This makes your table too big
    border:1px solid #ddd;
    padding:10px;
}

我会说删除width属性，你的表应该没问题。）

这是你的CSS代码

Answer 2

只需更改width中的CSS，如下面的代码所示。

要改进HTML，<th>元素已关闭为</td>。请将其更改为</th>。

table, th, td {
  border: 1px solid #ddd;
  padding: 10px;
}

table {
  width: 100%;  /* Make table 100% */
  border-collapse: collapse;
}

table th {
  width: 33.33%;  /* Make column i.e <th> 33.33% */
  text-align: left;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: normal;
  background: #36c;
  color: #fff;
}

希望它有所帮助！

Answer 3

我会看看width属性。目前，您已将其设置为100％。这意味着它将占据屏幕的整个宽度。也许，这个

<style>table, th, td {
        width:auto; //auto will adjust the table width automatically based on the size of each column
        border:1px solid #ddd;
        padding:10px;
         }
    table {
        border-collapse:collapse;
    }
    table td {
        font-size:13px;
    }
    table th {
        text-align:left;
        font-size:14px;
        text-transform:uppercase;
        font-weight:normal;
        background:#36c;
        color:#fff;
    }
    tr:nth-child(odd) {
        background-color: #f2f2f2;
    }</style>

Answer 4

您需要在width代码中添加<th> 属性（在HTML5中已弃用，已遗忘）样式。

例如

<tr>
  <th style="width:35%">Jill</td>
  <th style="width:35%">Smith</td> 
  <th style="width:30%">Santa</td>
</tr>

此外，100%或th的宽度不应为td。将您的CSS更改为：

table {
    width:100%;
}
table, th, td {
    border:1px solid #ddd;
    padding:10px;
}

小HTML表问题

4 个答案: