定制边桌 - 编程之家

如何解决定制边桌

我正在尝试使用引导程序设置的列将自定义边框添加到表中。目的是像草图一样附上桌子。

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

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

我一直在做一个小提琴，可以稍微靠近一点： https://jsfiddle.net/2020_RG/y47h3sbm/

尽管确切的间距我无法弄清楚草图中的边框。对此必须有一个更优雅的CSS解决方案。

任何帮助和建议都将是不可思议的，谢谢！

desired list1

此处的代码段

/* 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类添加了样式。