带有自定义边框的表格

Question

我正在尝试将自定义边框添加到具有引导程序设置的列的表中。目的是附上草图中的表格。

每一行的顶部/底部行边框之间以及列边框周围都应有间距。

悬停时，整行反转，占据浏览器的整个宽度，包括上方/下方的边框。

我研究过小提琴并且可以稍微接近： 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>

Answer 1

这是一个有效的fiddle，我已经为您的thead 添加了一些元素，并为.cell 和.cellContainer 类添加了样式。