等效-6ren"> 等效-我有两个不同的表,在第二个表上我想应用 border="border"属性作为 CSS。如何才能正确地做到这一点? Buyer's N-6ren">
gpt4 book ai didi

html - CSS: 等效
转载 作者:太空宇宙 更新时间:2023-11-04 10:37:55 27 4
gpt4 key购买 nike

我有两个不同的表,在第二个表上我想应用 border="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;
}

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

最佳答案

我们开始了......你离它不远

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

关于html - CSS: <table border ="border"> 等效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36026049/

27 4 0