我有一个需要有一个3px填充(加上边框)和背景(只有)的表日。
下面是我正在使用的:
<table class="data" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th scope="col">Example Here</th>
<th scope="col">Another Here</th>
<th scope="col">One Here</th>
<th scope="col">Two Here</th>
<th scope="col">Three Here</th>
</tr>
</thead>
<tbody>
<tr>
<td>This is some text.</td>
<td>Data table with data.</td>
<td>Data here.</td>
<td>And more here.</td>
<td>This is legit!</td>
</tr>
<tr>
<td>This is some text.</td>
<td>Data table with data.</td>
<td>Data here.</td>
<td>And more here.</td>
<td>This is legit!</td>
</tr>
<tr>
<td>This is some text.</td>
<td>Data table with data.</td>
<td>Data here.</td>
<td>And more here.</td>
<td>This is legit!</td>
</tr>
<tr>
<td>This is some text.</td>
<td>Data table with data.</td>
<td>Data here.</td>
<td>And more here.</td>
<td>This is legit!</td>
</tr>
</tbody>
</table>
<style type="text/css">
/* Data Table */
table.data {width:100%;border:1px solid #dfdfdf;color:#303030;border-radius:4px;padding:4px;line-height:25px;}
table.data thead tr {background:#eee;width:100%;}
table.data tbody tr:nth-child(even) {background:#efefef;}
table.data thead tr th:first-of-type {border-top-left-radius:4px;}
table.data thead tr th:last-of-type {border-top-right-radius:4px;}
table.data td, table.data th{padding:3px 8px 4px;}
</style>
我创建了一个带边框的表格,看起来创建了一个带边框的圆角,但是背景没有改变。所以很明显,使用相同的背景作为边框不会导致任何改变。我也玩过background:radial-gradient
,还没有解决方案。
谢谢
1条答案
按热度按时间xdyibdwo1#
我相信这就是你所期望的边界。我所做的唯一一件事就是从
table.data
类中删除border:1px solid #dfdfdf
,并添加到table.data td, table.data th
类中。以下是完整的更改: