为什么两个表格列宽不一样?

发布于
2017-10-10

两个并列的表格结构一样，但是却对不齐？
input标签在td里面是不是也会影响宽度？
希望能得到导致的原因和解决办法！

代码如下:

<!DOCTYPE html >
<html>
 <head>
  <meta http-equiv="Content-Language" content="zh-cn" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>test</title>
  <style type="text/css">
        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input,
        textarea, p, blockquote, th, td,tr,thead,tbody,table{margin: 0; padding: 0;}

        table tr td{ text-align:center;}
            td.wholesale{width:42px;}
            td.videoCoding{width:50px;}
            td.voice{width:88px;}
            td.sales{width:44px;}
            td.skuRelated{width:140px;}
            td.lastReportedTime input{display:block;width:100px;}
            td.lastReportedTime{width:100px;}
            td.finalQuantity{width:50px;}
            td.finalQuantity input{display:block;width:50px}

    </style>
 </head>
 <body>
<table cellspacing="0" cellpadding="1" rules="all" border="1" style="WIDTH:100%; WORD-BREAK: break-all; BORDER-COLLAPSE: collapse;">
  <thead>
    <tr>
      <td class="lastReportedTime">
         最后报量时间
      </td>
      <td class="finalQuantity">
         最后报量数量
      </td>
      <td class="voice">
         声道
      </td>
      <td class="sales">
         销售总数
      </td>
      <td class="videoCoding">
         视频编码
      </td>
      <td class="wholesale">
         批发价
      </td>
      <td class="skuRelated">
         相关SKU <font style="font-size:4px">(非实时)</font>
      </td>
    </tr>
  </thead>
</table>
<table cellspacing="0" cellpadding="1" rules="all" border="1" id="DataGrid1" style="WIDTH:100%; WORD-BREAK: break-all; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #f5fafe; WORD-WRAP: break-word">
  <thead>
    <tr>
      <td class="lastReportedTime">
         最后报量时间
      </td>
      <td class="finalQuantity">
         最后报量数量
      </td>
      <td class="voice">
         声道
      </td>
      <td class="sales">
         销售总数
      </td>
      <td class="videoCoding">
         视频编码
      </td>
      <td class="wholesale">
         批发价
      </td>
      <td class="skuRelated">
         相关SKU <font style="font-size:4px">(非实时)</font>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="lastReportedTime">
        <input value="我需要这样的input">
      </td>
      <td class="wholesale">
        input不要去掉
      </td>
      <td class="voice">
      </td>
      <td class="finalQuantity">
        就算是把input去掉也对不齐
      </td>
      <td class="videoCoding">
        希望能知道是什么原因
      </td>
      <td class="sales">
         谢谢了！
      </td>
      <td class="skuRelated">
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

代码演示：http://runjs.cn/detail/lyuos8dx

css html

阅读 7.2k

5 个回答

得票最新

Just_do

952116

发布于
2017-10-11

✓ 已被采纳

郁闷，你这个问题，我看了一个小时，简直很低级的错误！！！看我这么辛苦给你解决，给我个采纳把。

错误没有什么高深的，是你代码写错了。不信？

  `就算是把input去掉也对不齐`这个`td`的`class`是不是应该是`sales`？？

  `谢谢了！`这个`td`的`class`是不是应该是`wholesale`???

上面两个class改好，你发现还是有点对不齐？

你给input设置了`width:100px`，然后加上input的边框border,就变成`104px`了。审查元素看一下，

你可以给input改成`width:96px`,或者加`box-sizing:border-box`

John

2261232

发布于
2017-10-11

俩表格合一个

supreme

2.3k12465

发布于
2017-10-11

<!DOCTYPE html >
<html>

<head>
  <meta http-equiv="Content-Language" content="zh-cn" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>test</title>
  <style type="text/css">
    body,
    div,
    dl,
    dt,
    dd,
    ul,
    ol,
    li,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    form,
    fieldset,
    legend,
    input,
    textarea,
    p,
    blockquote,
    th,
    td,
    tr,
    thead,
    tbody,
    table {
      margin: 0;
      padding: 0;
    }

    table tr td {
      text-align: center;
    }

    td.wholesale {
      width: 42px;
    }

    td.videoCoding {
      width: 50px;
    }

    td.voice {
      width: 88px;
    }

    td.sales {
      width: 44px;
    }

    td.skuRelated {
      width: 140px;
    }

    td.lastReportedTime input {
      display: block;
      width: 100px;
    }

    td.lastReportedTime {
      width: 100px;
    }

    td.finalQuantity {
      width: 50px;
    }

    td.finalQuantity input {
      display: block;
      width: 50px
    }
  </style>
</head>

<body>
  <table cellspacing="0" cellpadding="1" rules="all" border="1" style="WIDTH:100%; WORD-BREAK: break-all; BORDER-COLLAPSE: collapse;">
    <thead>
      <tr>
        <th class="lastReportedTime">
          最后报量时间
        </th>
        <th class="finalQuantity">
          最后报量数量
        </th>
        <th class="voice">
          声道
        </th>
        <th class="sales">
          销售总数
        </th>
        <th class="videoCoding">
          视频编码
        </th>
        <th class="wholesale">
          批发价
        </th>
        <th class="skuRelated">
          相关SKU
          <font style="font-size:4px">(非实时)</font>
        </th>
        <tr>
          <td class="lastReportedTime">
            最后报量时间
          </td>
          <td class="finalQuantity">
            最后报量数量
          </td>
          <td class="voice">
            声道
          </td>
          <td class="sales">
            销售总数
          </td>
          <td class="videoCoding">
            视频编码
          </td>
          <td class="wholesale">
            批发价
          </td>
          <td class="skuRelated">
            相关SKU
            <font style="font-size:4px">(非实时)</font>
          </td>
        </tr>
      </tr>
      <tr>
        <td class="lastReportedTime">
          <input value="我需要这样的input">
        </td>
        <td class="wholesale">
          input不要去掉
        </td>
        <td class="voice">
        </td>
        <td class="finalQuantity">
          就算是把input去掉也对不齐
        </td>
        <td class="videoCoding">
          希望能知道是什么原因
        </td>
        <td class="sales">
          谢谢了！
        </td>
        <td class="skuRelated">
        </td>
      </tr>
    </thead>
  </table>
</body>

</html>

星痕

24211527

发布于
2017-10-11

2L正解，直接将第一个table的thead插入第二table的tbody，合并就完了

某某

1204

发布于
2017-10-11

自适应表格不好吗

**table {
    width: 100%;
    margin-bottom: 1rem;
    border-radius: 0;
}

table thead,
table tbody,
table tfoot {
    border: 1px solid #f1f1f1;
    background-color: #fefefe;
}

table caption {
    padding: 0.5rem 0.625rem 0.625rem;
    font-weight: bold;
}

table thead {
    background: #f8f8f8;
    color: #0a0a0a;
}

table tfoot {
    background: #f1f1f1;
    color: #0a0a0a;
}

table thead tr,
table tfoot tr {
    background: transparent;
}

table thead th,
table thead td,
table tfoot th,
table tfoot td {
    padding: 0.5rem 0.625rem 0.625rem;
    font-weight: bold;
    text-align: left;
}

table tbody th,
table tbody td {
    padding: 0.5rem 0.625rem 0.625rem;
}

table tbody tr:nth-child(even) {
    border-bottom: 0;
    background-color: #f1f1f1;
}

table.unstriped tbody {
    background-color: #fefefe;
}

table.unstriped tbody tr {
    border-bottom: 0;
    border-bottom: 1px solid #f1f1f1;
    background-color: #fefefe;
}

@media screen and (max-width: 63.9375em) {
    table.stack thead {
        display: none;
    }
    table.stack tfoot {
        display: none;
    }
    table.stack tr,
    table.stack th,
    table.stack td {
        display: block;
    }
    table.stack td {
        border-top: 0;
    }
}

table.scroll {
    display: block;
    width: 100%;
    overflow-x: auto;
}

table.hover thead tr:hover {
    background-color: #f3f3f3;
}

table.hover tfoot tr:hover {
    background-color: #ececec;
}

table.hover tbody tr:hover {
    background-color: #f9f9f9;
}

table.hover:not(.unstriped) tr:nth-of-type(even):hover {
    background-color: #ececec;
}

.table-scroll {
    overflow-x: auto;
}

.table-scroll table {
    width: auto;
}**

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

为什么两个表格列宽不一样?

你尚未登录，登录后可以

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

如何实现类似豆包的AI改写框跟随内容滚动效果？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

如何在Ant Design表格中同时设置scroll.x和scroll.y且表头不换行？