css关于表格布局的一个问题

所有的边框都是1px，类似于这样的有什么好的布局方式？

表格这东西太可怕了，不是一般人所能玩的转的东西。

当你使用了border-collapse: collapse;后，单元格是合并了，然后这个时候如果你的颜色都是统一一个颜色还好，但是如果有一个高亮的边框颜色，你会发现这个单元格的有部分边框中某些浏览器里可能会看不到，看到的还是那个灰色的。

然后一般我是直接在td里嵌套了一个div什么的来辅助完成。

其实没那行麻烦了，利用的表格和单元格的不同背景就可以实现的：

style:

<style>
table{ background-color:#f00; }
table tr td{ background-color:#fff; padding:10px; }
table tr td.selected{ border:1px solid blue; position:absolute; margin-top:-1px; margin-left:-1px; }
</style>

html:

<table cellpadding="0" cellspacing="1px">
    <tr>
        <td>aaa</td>
        <td>bbb</td>
        <td>ccc</td>
    </tr>
    <tr>
        <td>aaa</td>
        <td class="selected">bbb</td>
        <td>ccc</td>
    </tr>
    <tr>
        <td>aaa</td>
        <td>bbb</td>
        <td>ccc</td>
    </tr>
</table>

result:

加上这个试试：

csstable {
     border-collapse: collapse;
}

我想一下这种黑科技。。如果全用div呢让那个红色的div框做成position:absolute 然后overflow 遮住外面的div可行不

大概看了一下，不知下面的答案是否符合需求。楼主可以自己优化一下。

    <table>
        <tr>
            <th>分类1</th>
            <th>分类2</th>
            <th>分类3</th>
        </tr>
        <tr>
            <td>上午</td>
            <td>
                <div class="selected"><span>点击
                <br>预约</span>
                </div>
            </td>
            <td>已经
                <br>约满</td>
        </tr>
        <tr>
            <td>下午</td>
            <td>点击
                <br>预约</td>
            <td>已经
                <br>约满</td>
        </tr>
    </table>

然后关键点就在文字水平垂直居中还有边框为1px的覆盖了

        * {
            padding: 0;
            margin: 0;
        }
        
        table {
            width: 100%;
            border: 1px solid red;
            table-layout: fixed;
            border-collapse: collapse;
            height: 300px;
            background-color: #c7c3c3;
        }
        
        th,
        td {
            border: 1px solid green;
            position: relative;
        }
        
        tr {
            text-align: center;
            vertical-align: middle;
        }
        
        .selected {
            background: white;
            width: 100%;
            height: 100%;
            border: 1px solid red;
            position: absolute;
            top: -1px;
            left: -1px;
        }
        
        .selected span {
            display: block;
            position: relative;
            top: 50%;
            margin-top: -16px;
            /*因为span标签的width为32px*/
        }

最终的效果就是这样的：
http://output.jsbin.com/xodoyohato

Table.html

<html>
<head>
<style type="text/css">
table {
    border-collapse: collapse;
}
td {
    border: 1px solid #AAA;
}
.red {
    margin: 1px -2px;
    padding: 1px 2px;
    border: 1px solid #F00;
}
</style>
</head>
<body>
    <table>
        <tr>
            <td></td>
            <td></td>
            <td><span class="red">I have a red border</span></td>
            <td></td>
        </tr>
        <tr>
            <td><span class="red">I have a red border</span></td>
            <td></td>
            <td><span class="red">I have a red border</span></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td><span class="red">I have a red border</span></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td><span class="red">I have a red border</span></td>
        </tr>
    </table>
</body>
</html>

【热门文章】