HTML合并单元格

Question

你可以看到我的表格中的单元格都有单独的边框。我希望它们是无缝的垂直线和水平线......基本上使细胞壁相互接触。我用垫子假装那个？

<table align="center" class="data_extract vert_scroll_table" >
    <tr>
        <c:forEach var="heading" items="${results.headings}"> 
            <th class="data_extract">${heading}</th>
        </c:forEach>
    </tr>
    <c:forEach var="row" items="${results.data}">
        <tr>
            <c:forEach var="cell" items="${row}" varStatus="rowStatus">
                <td class="data_extract">
                    <c:choose>
                        <c:when test="${results.types[rowStatus.index].array}">
                            <c:forEach var="elem" items="${cell}" varStatus="cellStatus">
                                ${elem}<c:if test="${!cellStatus.last}">,&nbsp;</c:if>
                            </c:forEach>
                        </c:when>
                        <c:otherwise>
                            ${cell}
                        </c:otherwise>
                    </c:choose>
                </td>
            </c:forEach>
        </tr>
    </c:forEach>
</table>

CSS：

table.data_extract {
    table-layout: fixed;
    border: 2px gray solid;
}

td.data_extract,
th.data_extract,
table.data_extract td,
table.data_extract th {
    width: 125px;
    height: 75px;
    text-align: center;
    font-size: 7.5pt;
    white-space: normal;
    padding-left: 4px;
    padding-right: 4px;
}

Answer 1

您可以将CSS样式应用于名为border-collapse: collapse;

的表格

Answer 2

我已经有一段时间了，但是你可能想看看border-collapse

table { 
    border-collpase: collapse; 
}

table, td, th {
    border:1px solid black;
}