表td宽度问题 - 不能限制它

Question

代码：

.table1,
.table2 {
  border-collapse: collapse;
  border-spacing: 0px;
  width: 100%;
}

.table1 tr:nth-child(even) {
  background-color: #eee;
}

.table1 tr td,
.table2 tr td {
  width: 20%;
  line-height: 200%;
  padding: 0px;
  border: 0px;
}

.table2 tr:first-child {
  border-bottom: 4px double #444;
}

<div class="content">
  <table class="table2">
    <tbody>
      <tr>
        <td>
          <input id="checkall" type="checkbox">
        </td>
        <td>
          Autor
        </td>
        <td>
          Komentarz
        </td>
        <td>
          Data dodania
        </td>
        <td>
          Post
        </td>
        <td>
          Status
        </td>
      </tr>
    </tbody>
  </table>
  <table class="table1">
    <tbody>
      <tr>
        <td>
          <input type="checkbox" name="post[]" value="1">
        </td>
        <td>
          cipka|cipuszka@o2.pl </td>
        <td>
          sadasdsad </td>
        <td>
          2017-06-03 </td>
        <td>
          Przykładowy Tytuł Strony </td>
        <td>
          0 </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="post[]" value="4">
        </td>
        <td>
          cipka|cipuszka@o2.pl </td>
        <td>
          sako </td>
        <td>
          2017-06-04 </td>
        <td>
          Burde lubie kielbaske se zjesc! </td>
        <td>
          1 </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="post[]" value="5">
        </td>
        <td>
          Cipenia|Cifuszka@o2.pl </td>
        <td>
          aoskdopaskdop



        </td>
        <td>
          2017-06-04 </td>
        <td>
          Przykładowy Tytuł Strony </td>
        <td>
          0 </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="post[]" value="6">
        </td>
        <td>
          Cifaretka|cifunia@o2.pl </td>
        <td>
          oakspodkpoasdasd </td>
        <td>
          2017-06-04 </td>
        <td>
          Przykładowy Tytuł Strony </td>
        <td>
          0 </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="post[]" value="11">
        </td>
        <td>
          sadsadsadsad|sadsadas@o2.pl </td>
        <td>
          sadsadas </td>
        <td>
          2017-06-09 </td>
        <td>
          Burde lubie kielbaske se zjesc! </td>
        <td>
          1 </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="post[]" value="12">
        </td>
        <td>
          asdksd|asdasdas@o2.pl </td>
        <td>
          sfkdskpofksdfdsfsdfsdf </td>
        <td>
          2017-06-13 </td>
        <td>
          Przykładowy Tytuł Strony </td>
        <td>
          0 </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="post[]" value="13">
        </td>
        <td>
          asdksd|asdasdas@o2.pl </td>
        <td>
          sfkdskpofksdfdsfsdfsdf </td>
        <td>
          2017-06-13 </td>
        <td>
          Przykładowy Tytuł Strony </td>
        <td>
          0 </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="post[]" value="14">
        </td>
        <td>
          asdksdCIA|asdasdas@o2.pl </td>
        <td>
          sfkdskpofksdfdsfsdfsdf </td>
        <td>
          2017-06-13 </td>
        <td>
          Przykładowy Tytuł Strony </td>
        <td>
          0 </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="post[]" value="15">
        </td>
        <td>
          Fajny|komentarz@o2.pl </td>
        <td>
          opkpodkadadsad </td>
        <td>
          2017-06-13 </td>
        <td>
          Przykładowy Tytuł Strony </td>
        <td>
          1 </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="post[]" value="16">
        </td>
        <td>
          dsfdsfdsf|dsdsf@o2.pl </td>
        <td>
          sadfsdfsdf </td>
        <td>
          2017-06-16 </td>
        <td>
          Przykładowy Tytuł Strony </td>
        <td>
          0 </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="post[]" value="17">
        </td>
        <td>
          dsfdsfdsf|dsdfgdsf@o2.pl </td>
        <td>
          sadfsdfsdf </td>
        <td>
          2017-06-16 </td>
        <td>
          Przykładowy Tytuł Strony </td>
        <td>
          0 </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="post[]" value="90">
        </td>
        <td>
          dsfdsfdsfdsf|dsfds@o2.pl </td>
        <td>
          dsfdsfdsf </td>
        <td>
          2017-06-17 </td>
        <td>
          Burde lubie kielbaske se zjesc! </td>
        <td>
          1 </td>
      </tr>
    </tbody>
  </table>
</div>

问题是此表在td上存在宽度问题。 看，就像：

看起来应该是这样的：

我有6 td个。所以我甚至将宽度设置为100/6 = 15或16%。

尝试max-width: 16%。依然没有。这些td的......无法控制它们的宽度。完全不知道如何解决这个问题。

Answer 1

＆＃13;

＆＃13;

.table1, .table2 {
  border-collapse: collapse;
  border-spacing: 0px;
  width: 100%;
}

.table1 tr:nth-child(even) {
  background-color: #eee;
}

.table1 tr td, .table2 tr td {
  width: 20%;
  line-height: 200%;
  padding: 0px;
  border: 0px;
}

.table2 tr:first-child {
  border-bottom: 4px double #444;
}

table tr th{
  border-bottom: 4px double #444;
  text-align: left;
}

＆＃13;

<div class="content">
  <table class="table1">
    <thead>
      <tr>
        <th>
          <input id="checkall" type="checkbox">
        </th>
        <th>
          Autor
        </th>
        <th>
          Komentarz
        </th>
        <th>
          Data dodania
        </th>
        <th>
          Post
        </th>
        <th>
          Status
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <input type="checkbox" name="post[]" value="1">
        </td>
        <td>
          cipka|cipuszka@o2.pl </td>
        <td>
          sadasdsad </td>
        <td>
          2017-06-03 </td>
        <td>
          Przykładowy Tytuł Strony </td>
        <td>
          0 </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="post[]" value="4">
        </td>
        <td>
          cipka|cipuszka@o2.pl </td>
        <td>
          sako </td>
        <td>
          2017-06-04 </td>
        <td>
          Burde lubie kielbaske se zjesc! </td>
        <td>
          1 </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="post[]" value="5">
        </td>
        <td>
          Cipenia|Cifuszka@o2.pl </td>
        <td>
          aoskdopaskdop



        </td>
        <td>
          2017-06-04 </td>
        <td>
          Przykładowy Tytuł Strony </td>
        <td>
          0 </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="post[]" value="6">
        </td>
        <td>
          Cifaretka|cifunia@o2.pl </td>
        <td>
          oakspodkpoasdasd </td>
        <td>
          2017-06-04 </td>
        <td>
          Przykładowy Tytuł Strony </td>
        <td>
          0 </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="post[]" value="11">
        </td>
        <td>
          sadsadsadsad|sadsadas@o2.pl </td>
        <td>
          sadsadas </td>
        <td>
          2017-06-09 </td>
        <td>
          Burde lubie kielbaske se zjesc! </td>
        <td>
          1 </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="post[]" value="12">
        </td>
        <td>
          asdksd|asdasdas@o2.pl </td>
        <td>
          sfkdskpofksdfdsfsdfsdf </td>
        <td>
          2017-06-13 </td>
        <td>
          Przykładowy Tytuł Strony </td>
        <td>
          0 </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="post[]" value="13">
        </td>
        <td>
          asdksd|asdasdas@o2.pl </td>
        <td>
          sfkdskpofksdfdsfsdfsdf </td>
        <td>
          2017-06-13 </td>
        <td>
          Przykładowy Tytuł Strony </td>
        <td>
          0 </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="post[]" value="14">
        </td>
        <td>
          asdksdCIA|asdasdas@o2.pl </td>
        <td>
          sfkdskpofksdfdsfsdfsdf </td>
        <td>
          2017-06-13 </td>
        <td>
          Przykładowy Tytuł Strony </td>
        <td>
          0 </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="post[]" value="15">
        </td>
        <td>
          Fajny|komentarz@o2.pl </td>
        <td>
          opkpodkadadsad </td>
        <td>
          2017-06-13 </td>
        <td>
          Przykładowy Tytuł Strony </td>
        <td>
          1 </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="post[]" value="16">
        </td>
        <td>
          dsfdsfdsf|dsdsf@o2.pl </td>
        <td>
          sadfsdfsdf </td>
        <td>
          2017-06-16 </td>
        <td>
          Przykładowy Tytuł Strony </td>
        <td>
          0 </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="post[]" value="17">
        </td>
        <td>
          dsfdsfdsf|dsdfgdsf@o2.pl </td>
        <td>
          sadfsdfsdf </td>
        <td>
          2017-06-16 </td>
        <td>
          Przykładowy Tytuł Strony </td>
        <td>
          0 </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="post[]" value="90">
        </td>
        <td>
          dsfdsfdsfdsf|dsfds@o2.pl </td>
        <td>
          dsfdsfdsf </td>
        <td>
          2017-06-17 </td>
        <td>
          Burde lubie kielbaske se zjesc! </td>
        <td>
          1 </td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您希望表格行的宽度相等，则可以为表格设置相等的table-layout: fixed。在这种情况下，您无需明确设置td的宽度。

.table1,
.table2 {
  border-collapse: collapse;
  border-spacing: 0px;
  width: 100%;
  table-layout: fixed;
}

.table1 tr:nth-child(even) {
  background-color: #eee;
}

.table1 tr td,
.table2 tr td {
  line-height: 200%;
  padding: 0px;
  border: 0px;
}

.table2 tr:first-child {
  border-bottom: 4px double #444;
}

<div class="content">
  <table class="table2">
    <tbody>
      <tr>
        <td>
          <input id="checkall" type="checkbox">
        </td>
        <td>
          Autor
        </td>
        <td>
          Komentarz
        </td>
        <td>
          Data dodania
        </td>
        <td>
          Post
        </td>
        <td>
          Status
        </td>
      </tr>
    </tbody>
  </table>
  <table class="table1">
    <tbody>
      <tr>
        <td>
          <input type="checkbox" name="post[]" value="1">
        </td>
        <td>
          cipka|cipuszka@o2.pl </td>
        <td>
          sadasdsad </td>
        <td>
          2017-06-03 </td>
        <td>
          Przykładowy Tytuł Strony </td>
        <td>
          0 </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="post[]" value="4">
        </td>
        <td>
          cipka|cipuszka@o2.pl </td>
        <td>
          sako </td>
        <td>
          2017-06-04 </td>
        <td>
          Burde lubie kielbaske se zjesc! </td>
        <td>
          1 </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="post[]" value="5">
        </td>
        <td>
          Cipenia|Cifuszka@o2.pl </td>
        <td>
          aoskdopaskdop



        </td>
        <td>
          2017-06-04 </td>
        <td>
          Przykładowy Tytuł Strony </td>
        <td>
          0 </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="post[]" value="6">
        </td>
        <td>
          Cifaretka|cifunia@o2.pl </td>
        <td>
          oakspodkpoasdasd </td>
        <td>
          2017-06-04 </td>
        <td>
          Przykładowy Tytuł Strony </td>
        <td>
          0 </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="post[]" value="11">
        </td>
        <td>
          sadsadsadsad|sadsadas@o2.pl </td>
        <td>
          sadsadas </td>
        <td>
          2017-06-09 </td>
        <td>
          Burde lubie kielbaske se zjesc! </td>
        <td>
          1 </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="post[]" value="12">
        </td>
        <td>
          asdksd|asdasdas@o2.pl </td>
        <td>
          sfkdskpofksdfdsfsdfsdf </td>
        <td>
          2017-06-13 </td>
        <td>
          Przykładowy Tytuł Strony </td>
        <td>
          0 </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="post[]" value="13">
        </td>
        <td>
          asdksd|asdasdas@o2.pl </td>
        <td>
          sfkdskpofksdfdsfsdfsdf </td>
        <td>
          2017-06-13 </td>
        <td>
          Przykładowy Tytuł Strony </td>
        <td>
          0 </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="post[]" value="14">
        </td>
        <td>
          asdksdCIA|asdasdas@o2.pl </td>
        <td>
          sfkdskpofksdfdsfsdfsdf </td>
        <td>
          2017-06-13 </td>
        <td>
          Przykładowy Tytuł Strony </td>
        <td>
          0 </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="post[]" value="15">
        </td>
        <td>
          Fajny|komentarz@o2.pl </td>
        <td>
          opkpodkadadsad </td>
        <td>
          2017-06-13 </td>
        <td>
          Przykładowy Tytuł Strony </td>
        <td>
          1 </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="post[]" value="16">
        </td>
        <td>
          dsfdsfdsf|dsdsf@o2.pl </td>
        <td>
          sadfsdfsdf </td>
        <td>
          2017-06-16 </td>
        <td>
          Przykładowy Tytuł Strony </td>
        <td>
          0 </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="post[]" value="17">
        </td>
        <td>
          dsfdsfdsf|dsdfgdsf@o2.pl </td>
        <td>
          sadfsdfsdf </td>
        <td>
          2017-06-16 </td>
        <td>
          Przykładowy Tytuł Strony </td>
        <td>
          0 </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="post[]" value="90">
        </td>
        <td>
          dsfdsfdsfdsf|dsfds@o2.pl </td>
        <td>
          dsfdsfdsf </td>
        <td>
          2017-06-17 </td>
        <td>
          Burde lubie kielbaske se zjesc! </td>
        <td>
          1 </td>
      </tr>
    </tbody>
  </table>
</div>