Question

尝试在borders上获取table-rows。如果表格有border-collapse，则边框适用，但表格会丢失应用的填充。

如何在不丢失填充的情况下获取绿色表格上的red-borders？ http://jsfiddle.net/r11xa2un/

<style>
table {
    padding: 0 20px;
    background-color: green;
}
table.two {
    border-collapse: collapse;
    background-color:orange;
}
table tr {
    border-bottom: 2px solid red;
}
</style>

<table>
    <tbody>
        <tr>
            <th>Lorem ipsum</th>
            <td>Dolor sit amet</td>
        </tr>
        <tr>
            <th>Lorem ipsum</th>
            <td>Amet sit ipsum</td>
        </tr>
    </tbody>
</table>

<table class="two">
    <tbody>
        <tr>
            <th>Lorem ipsum</th>
            <td>Dolor sit amet</td>
        </tr>
        <tr>
            <th>Lorem ipsum</th>
            <td>Amet sit ipsum</td>
        </tr>
    </tbody>
</table>

Answer 1

只需将左侧填充添加到th，将右侧填充添加到td，然后添加到第二个table。

table.two th {padding-left: 20px;}
table.two td {padding-right: 20px;}

http://jsfiddle.net/r11xa2un/3/

当表没有折叠时，如何将颜色放到行上是没有办法的，因为单元格之间有垂直空间（所以行边界会不连续）。

Answer 2

您是否期望这样的事情： DEMO

<强> CSS：

table {
    border-collapse: collapse;
    background-color: green;
}
table.two {
    border-collapse: collapse;
    background-color:orange;
}
table tr {
    padding: 0 20px;
    display: block;
    border-bottom: 2px solid red;
}

Answer 3

我完全按照以前的方式制作了表格，但每个<tr>元素的底部都有一个边框。

table {
    background-color: green;
    border-collapse: collapse; 
}

table.one tr th{
    padding-left: 20px;
}

table.one tr td{
    padding-right: 20px;   
}

table.two {
    border-collapse: collapse;
    background-color:orange;
}
table tr {
    border-bottom: 2px solid red;
}

<table class="one">
	<tbody>
		<tr>
			<th>Lorem ipsum</th>
			<td>Dolor sit amet</td>
		</tr>
		<tr>
			<th>Lorem ipsum</th>
			<td>Amet sit ipsum</td>
		</tr>
	</tbody>
</table>

<table class="two">
	<tbody>
		<tr>
			<th>Lorem ipsum</th>
			<td>Dolor sit amet</td>
		</tr>
		<tr>
			<th>Lorem ipsum</th>
			<td>Amet sit ipsum</td>
		</tr>
	</tbody>
</table>

http://jsfiddle.net/r11xa2un/16/

带有填充和边框的HTML CSS表

3 个答案: