问题描述
我正在尝试使用引导程序设置的列将自定义边框添加到表中。目的是像草图一样附上桌子。
每行的顶部/底部行边框之间以及列边框之间都应有间距。
悬停时,整个行将反转,并占据浏览器的整个宽度,包括上/下边框。
我一直在做一个小提琴,可以稍微靠近一点: https://jsfiddle.net/2020_RG/y47h3sbm/
尽管确切的间距我无法弄清楚草图中的边框。对此必须有一个更优雅的CSS解决方案。
任何帮助和建议都将是不可思议的,谢谢!
此处的代码段
/* Bootstrap Reset */
.row {
margin: 0 !important;
}
.col,.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-auto,.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto {
padding: 0 !important;
}
.table-bordered {
border: none;
}
.table-bordered td,.table-bordered th {
border: none;
}
.table thead th {
border-bottom: none !important;
}
.table thead th:focus {
outline: none !important;
}
.table th,.table td {
border-top: none !important;
}
/* CSS */
body {
font-family; 'Helvetica';
font-size:3vw;
}
.subheading {
font-size:1.5vw;
}
.table tr.row {
padding: 0 1.2vw;
}
.table thead th {
margin: 5px 0;
width: 55% !important;
border-bottom: 1px solid black !important;
}
.cellContainer {
display: block;
width: 98%;
border-bottom: 1px solid black !important;
border-top: 1px solid transparent !important;
}
.cell {
display: block;
margin: 5px 0;
width: 101.2%;
border-right: 1px solid black !important;
}
.link {
cursor: pointer;
}
.link:hover {
color: white;
background: black;
}
<table class="table">
<thead>
<tr class="row subheading">
<th class="col-md-4">
Author
</th>
<th class="col-md-5">
Title
</th>
<th class="col-md-3">
Year
</th>
</tr>
</thead>
<tbody>
<tr class="row link" data-href="#">
<td class="col-md-4">
<span class="cellContainer">
<span class="cell">Alice Walker</span>
</span>
</td>
<td class="col-md-5">
<span class="cellContainer">
<span class="cell">The Color Purple</span>
</span>
</td>
<td class="col-md-3">
<span class="cellContainer">
<span class="cell">1982</span>
</span>
</td>
</tr>
<tr class="row link" data-href="#">
<td class="col-md-4">
<span class="cellContainer">
<span class="cell">Charlotte brontë</span>
</span>
</td>
<td class="col-md-5">
<span class="cellContainer">
<span class="cell">Jane Eyre</span>
</span>
</td>
<td class="col-md-3">
<span class="cellContainer">
<span class="cell">1847</span>
</span>
</td>
</tr>
<tr class="row link" data-href="#">
<td class="col-md-4">
<span class="cellContainer">
<span class="cell">Virginia Woolf</span>
</span>
</td>
<td class="col-md-5">
<span class="cellContainer">
<span class="cell">Mrs. Dalloway</span>
</span>
</td>
<td class="col-md-3">
<span class="cellContainer">
<span class="cell">1925</span>
</span>
</td>
</tr>
<tr class="row link" data-href="#">
<td class="col-md-4">
<span class="cellContainer">
<span class="cell">Toni Morrison</span>
</span>
</td>
<td class="col-md-5">
<span class="cellContainer">
<span class="cell">Beloved</span>
</span>
</td>
<td class="col-md-3">
<span class="cellContainer">
<span class="cell">1987</span>
</span>
</td>
</tr>
<tr class="row link" data-href="#">
<td class="col-md-4">
<span class="cellContainer">
<span class="cell">Saul Frampton</span>
</span>
</td>
<td class="col-md-5">
<span class="cellContainer">
<span class="cell">When I Am Playing With My Cat,How Do I KNow She Is Not Playing With Me?</span>
</span>
</td>
<td class="col-md-3">
<span class="cellContainer">
<span class="cell">2011</span>
</span>
</td>
</tr>
<tr class="row link" data-href="#">
<td class="col-md-4">
<span class="cellContainer">
<span class="cell">Miguel de Cervantes</span>
</span>
</td>
<td class="col-md-5">
<span class="cellContainer">
<span class="cell">Don Quixote</span>
</span>
</td>
<td class="col-md-3">
<span class="cellContainer">
<span class="cell">1605</span>
</span>
</td>
</tr>
</tbody>
</table>
解决方法
这是一个有效的fiddle,我已经向您的thead
添加了一些元素,并为.cell
和.cellContainer
类添加了样式。