Question

我有两个不同的表格，在第二个表格中我想应用border =＆＃34; border＆＃34;作为CSS引用。如何才能正确完成此操作？

    <table>
        <!-- Text widgets for the customer's name and address -->
        <tr>
          <td>Buyer's Name:</td>
          <td>
            <input type="text" name="name" size="30" />
          </td>
        </tr>
        <tr>
          <td>Street Address:</td>
          <td>
            <input type="text" name="street" size="30" />
          </td>
        </tr>
        <tr>
          <td>City, State, Zip:</td>
          <td>
            <input type="text" name="city" size="30" />
          </td>
        </tr>
      </table>

      <table class="tableProduct">
        <!-- First, the column headings -->
        <tr>
          <th>Product</th>
          <th>Price</th>
          <th>Quantity</th>
        </tr>

        <!-- Now, the table data entries -->
        <tr>
          <td>Unpopped Popcorn (1 lb.)</td>
          <td>$3.00</td>
          <td class="tdcenter">
            <input type="text" name="unpop" size="3" />
          </td>
        </tr>

        <tr>
          <td>Caramel Popcorn (2 lb. canister)</td>
          <td>$3.50</td>
          <td class="tdcenter">
            <input type="text" name="caramel" size="3" />
          </td>
        </tr>

        <tr>
          <td>Caramel Nut Popcorn (2 lb. canister)</td>
          <td>$4.50</td>
          <td class="tdcenter">
            <input type="text" name="caramelnut" size="3" />
          </td>
        </tr>

      </table>

我尝试使用以下内容创建类tableProduct：

.tableProduct {
    border: 1px solid black;
    border-collapse: collapse;
}

但它只是在表格周围创建了一个边框。我希望它在每个单元格中创建一个边框。

Answer 1

我们走了......你离它还不远

＆＃13;

.tableProduct {
    border-collapse: collapse;
}

.tableProduct th,                 /*  this line is for the headers  */
.tableProduct td {
    border: 1px solid black;
}

＆＃13;

<table>
  <!-- Text widgets for the customer's name and address -->
  <tr>
    <td>Buyer's Name:</td>
    <td>
      <input type="text" name="name" size="30" />
    </td>
  </tr>
  <tr>
    <td>Street Address:</td>
    <td>
      <input type="text" name="street" size="30" />
    </td>
  </tr>
  <tr>
    <td>City, State, Zip:</td>
    <td>
      <input type="text" name="city" size="30" />
    </td>
  </tr>
</table>

<table class="tableProduct">
  <!-- First, the column headings -->
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Quantity</th>
  </tr>

  <!-- Now, the table data entries -->
  <tr>
    <td>Unpopped Popcorn (1 lb.)</td>
    <td>$3.00</td>
    <td class="tdcenter">
      <input type="text" name="unpop" size="3" />
    </td>
  </tr>

  <tr>
    <td>Caramel Popcorn (2 lb. canister)</td>
    <td>$3.50</td>
    <td class="tdcenter">
      <input type="text" name="caramel" size="3" />
    </td>
  </tr>

  <tr>
    <td>Caramel Nut Popcorn (2 lb. canister)</td>
    <td>$4.50</td>
    <td class="tdcenter">
      <input type="text" name="caramelnut" size="3" />
    </td>
  </tr>

</table>

＆＃13;

Answer 2

table.tableProduct td {
  border: 1px black solid;
  border-collapse: collapse;
}

这将在所有表数据周围分别设置边框。

为了更好地衡量，您可能希望在那里添加边框折叠。这样你就可以看到一个实线边框，而不是两个相互竞争的边界线 - 一个来自表格，另一个来自表格数据。

编辑：使用css组合器！我们在table.tableProduct和td之间添加一个空格，请将这些CSS规则应用于td元素的后代的所有table元素。班tableProduct。

Answer 3

您还需要将样式应用于th和td元素。

table, th, td {
   border: 1px solid black;
}

您可以更多地了解桌面样式here。

CSS：相当于

3 个答案: