带有自定义边框的表格
Posted
技术标签:
【中文标题】带有自定义边框的表格【英文标题】：TABLE WITH CUSTOMISED BORDER 【发布时间】：2020-12-13 09:59:54 【问题描述】：我正在尝试将自定义边框添加到具有引导程序设置的列的表中。目的是附上草图中的表格。
每一行的顶部/底部行边框之间以及列边框周围都应有间距。
悬停时，整行反转，占据浏览器的整个宽度，包括上方/下方的边框。
我研究过小提琴并且可以稍微接近： 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>【问题讨论】：
【参考方案1】：这是一个有效的fiddle，我已经为您的thead 添加了一些元素，并为.cell 和.cellContainer 类添加了样式。
【讨论】：
谢谢！这很接近。有没有办法也可以使用 calc 设置单元格的宽度，然后以更清晰的方式定义间距——比如每列之间的 10px？我一直在挣扎并且通过使宽度超过 100% 得到了一点技巧，尽管如果可能的话 calc 似乎是一个更好的解决方案？ + 有没有办法让悬停也包含边界线？现在它在纯色背景中产生了一个间隙，看起来有点奇怪。谢谢！ 还在为这个而苦苦挣扎。任何人都可以帮助悬停填补空白并包括上方和下方的边框吗？谢谢！以上是关于带有自定义边框的表格的主要内容，如果未能解决你的问题，请参考以下文章
bootstrap-table 使用遇到的问题总结：1.右上角button样式自定义；2.右上角引用图标自定义；3.表头/表格内容显示不对齐；4.自定义设置表头及表格边框样式