CSS：<表border=“边框”>等效

Question

我有两个不同的表，在第二个表上，我想将border=“边框”作为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

开始吧..。你离它不远

​

.tableProduct {
    border-collapse: collapse;
}

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

<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>

​

Answer 2

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

这将在您的所有表数据周围单独放置一个边框。

为了达到好的效果，您可能需要在其中添加边框崩溃。这样，您就可以看到一个坚实的边框，而不是两个相互竞争的边框--一条来自表，另一条来自表数据。

编辑:与css组合！通过在table.tableProduct和td之间留出一个空格，我们的意思是，请将这些CSS规则应用于table元素的所有td元素，这些元素是table元素与类tableProduct的后代。

Answer 3

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

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

您可以在表上阅读更多的这里样式。