Question

我不知道为什么这会给我这样的问题;我已经制作了数百万次功能表。试图制作一个全宽度的桌子。

第一个单元格应占用其他两个单元格未能达到的空间。第二个和第三个单元格应为200px。

目标是没有宽度归因于第一个单元格，因此当窗口改变大小时它会改变大小 - 但即使我向所有三个添加宽度属性（如下面的CSS中所示），它没有正确地隔开。尽管我已经用100％的宽度标记了桌子，但它已经塞进桌子的最右角。

请帮助！

＆＃13;

table.topper-table {
	width: 100%;
}

td.topper-table-nav {
	width: 65%;
	text-align: left;
}

td.topper-table-search {
	width: 10%;
	text-align: right;
  	padding-right: 25px;
}

td.topper-table-social {
	width: 25%;
	text-align: right;
	border-left: 1px solid #9db3c4;
	padding-left: 25px;
}

＆＃13;

<table class="topper-table">
<tr>
<td class="topper-table-nav">
TEST
</td>
<td class="topper-table-search">
TEST 2
</td>
<td class="topper-table-social">
TEST 3
</td>
</tr>
</table>

＆＃13;

Answer 1

我认为这是您正在瞄准的代码，这正是您尝试在Chrome和Firefox中实现的目标。我想你已经尝试过这样的事情（不是上面显示的百分比）。您可以测试我的代码并运行它以查看它在您的计算机上呈现的方式吗？

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <style>
    table.topper-table {
      width: 100%;
    }
    td.topper-table-nav {
      text-align: left;
      background-color: orange;
    }
    td.topper-table-search {
      width: 200px;
      text-align: right;
      padding-right: 25px;
      background-color: red;
    }
    td.topper-table-social {
      width: 200px;
      text-align: right;
      border-left: 1px solid #9db3c4;
      padding-left: 25px;
      background-color: lime;
    }
  </style>
</head>

<body>

  <table class="topper-table">
    <tr>
      <td class="topper-table-nav">TEST 1</td>
      <td class="topper-table-search">TEST 2</td>
      <td class="topper-table-social">TEST 3</td>
    </tr>
  </table>

</body>

</html>

＆＃13;

td宽度不起作用 - 没有CLUE为什么

1 个答案: