Question

这里我有嵌套的格式化表格。每个表行头具有相同的嵌套表列宽度相等的宽度。如果我添加任何填充或边距，表格单元格会崩溃。如何使每个列具有相同的宽度并改变。

以下代码：

table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
td,
th {
  border: 1px solid #000;
  padding: 0;
}

<table>
  <tr>
    <th width="20%">Head1</th>
    <th width="20%">Head2</th>
    <th width="20%">Head3</th>
    <th width="20%">Head1</th>
    <th width="20%">Head2</th>
  </tr>
</table>
<table>
  <tr>
    <td colspan="5">
      <table>
        <tr>
          <td>data1</td>
          <td>data2</td>
          <td>equa3</td>
          <td>data2</td>
          <td>equa3</td>
        </tr>
        <tr>
          <td colspan=5 "><table>
       <tr>
        <td>data1</td>
      <td>data2</td>
       <td>equa3</td>
     	 <td>data2</td>
      <td>equa3</td>
     </tr>
  
     </table></td></tr>
     </table></td>
     </tr>
     </table>

任何建议：

Answer 1

使用这种类型的结构为什么因为当记录更多你的期望然后你需要Scrollbar。那时你的表结构不能支持。我给出一个结构只是遵循它在任何环境中工作正常，但最后根据你的表结构不可能。

if (!($_SERVER['PHP_AUTH_USER'] == 'admin' && $_SERVER['PHP_AUTH_PW'] == 'admin')) {
            header('WWW-Authenticate: Basic realm="Protected"');
            header('HTTP/1.0 401 Unauthorized');
            return new JsonResponse(array('error' => "Unauthorized: appel non authentifié ou détails d'authentification non valides"));
        }

table,tr,th,td{
border:1px solid;
  border-collapse:collapse;
}
.header{
position:relative;
display:inline-block;
width:calc(100% - 17px);
width:-webkit-calc(100% - 17px);
width:-moz-calc(100% - 17px);
}

Answer 2

您需要在css的th字段中添加with，这样两个表将共享相同的width属性。

td,th { border: 1px solid #000; padding: 0; width: 20%; }

嵌套表格对齐，百分比宽度

2 个答案: