css - 小型 HTML 表格问题

标签 css html html-table

我有这张图片中显示的上表。我想修复吉尔和史密斯之间的空间。以最后一张表为例。不知道如何解释,因为英语不是我的母语。

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;
}

最佳答案

这就是你的问题所在,

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

我会说删除宽度属性,您的表格应该没问题:)

这是你的 CSS 代码

关于css - 小型 HTML 表格问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34320074/

相关文章:

javascript - 使用 jQuery 迭代 HTML 表行并更改列值

javascript - jQuery 表单输入到数组中不起作用

css - Div表交替行4个单元格和1个单元格

css - div 设置为 100% 不起作用

javascript - 检索单击元素的父级

html - 自定义 css 不会覆盖第一个 css 文件中的属性

javascript - 使用右/左动画隐藏/显示动态生成的表格列

css - 在 SVG 中,有一种方法可以将不同的样式表 (CSS) 应用于每个 <use> 实例

css - 使用 iCheck : checkbox and label on different lines (want them inline)

html - 表格 td 边框可见和不可见同一行