我正在设计薪水单，我几乎完成了设计，我想在它周围找到一个不错的边框，看来边框是白色或乳白色，但是当我更改颜色时，看起来非常糟糕而且渲染效果很差。
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Salary Slip : ${initParam['applicationName']}</title>
<%@include file="../common/include.jsp" %>
<style>
table th
{
background-color:#448AFF;
}
#empName
{
background-color:#ffffff;
}
#woSpTable > thead > tr:nth-child(2) > th:nth-child(1),
#woSpTable > thead > tr:nth-child(2) > th:nth-child(2),
#woSpTable > thead > tr:nth-child(2) > th:nth-child(3)
{
color:#ffffff;
}
#example-1 > tbody > tr:nth-child(1) > th:nth-child(1),
#example-1 > tbody > tr:nth-child(1) > th:nth-child(2),
#example-1 > tbody > tr:nth-child(1) > th:nth-child(3),
#example-1 > tbody > tr:nth-child(1) > th:nth-child(4),
#example-1 > tbody > tr:nth-child(1) > th:nth-child(5)
{
color:#ffffff;
}
#woSpTable >tbody >tr >td:nth-child(1),
#woSpTable >tbody >tr >td:nth-child(3),
#woSpTable >tbody >tr >td:nth-child(5),
#woSpTable >tbody >tr >td:nth-child(7),
#woSpTable >tbody >tr >td:nth-child(9)
{
font-weight: bold;
}
.fontSizeNetPay
{
font-size: 18px;
}
.iconDetails {
margin-left:2%;
float:left;
height:55px;
}
.container2 {
width:100%;
height:auto;
padding:1%;
}
</style>
</head>
<body class="page-body skin-facebook horizontal-menu-skin-facebook user-info-navbar-skin-navy">
<%@include file="../common/top_settings.jsp" %>
<div class="page-container" >
<%@include file="../common/left_menu.jsp" %>
<div class="main-content">
<%@include file="../common/header.jsp" %>
<section class="profile-env" class="border">
<div class="panel-heading " style="text-align: center">
<h2>SALARY SLIP</h2>
</div>
<div class="panel panel-body">
<div class='container2'>
<div>
<img src="<%=ProjectConfig.resourcePath%><%=ProjectConfig.departmentLogoDark%>" height="55" class="pull-right iconDetails"style="margin-bottom:10px; "/>
</div>
<div >
<h4 style="margin-top:10px">Employee Salary Detail For Month-Year(${yearMonth})</h4>
</div>
</div>
<table id="woSpTable" align="center" class="table table-bordered fontsize" >
<thead>
<tr><th colspan="7" id="empName" style="border: 0.5px solid #000000" > SUPER ADMINISTRATOR </th></tr>
<tr>
<th colspan="2" bgcolor="#448AFF"> Employee Details</th>
<th colspan="2" bgcolor="#448AFF">Payment & Leave Details</th>
<th colspan="2" bgcolor="#448AFF">Location Details</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tdFontWeight">Employee Code</td>
<td>12345678</td>
<td>Bank details</td>
<td>Axis Bank</td>
<td>Official Location</td>
<td>AKVN Bhopal</td>
</tr>
<tr>
<td>Grade </td>
<td> Class 1 Officer</td>
<td>Account No.</td>
<td>383702104568</td>
<td>Bank Branch</td>
<td>Main Branch</td>
</tr>
<tr>
<td>Pan No </td>
<td>ADEP123456</td>
<td>Paid For Month</td>
<td>November 2018</td>
<td>Account No.</td>
<td>383702104568</td>
</tr>
</tbody>
</table>
<table align="center" class="table table-bordered fontsize" >
<tr>
<td width="50%" class="no-padding">
<table id="example-1" class="table fontSize table-bordered">
<tr style="font-weight: bolder">
<th style="width:inherit; background-color:#448AFF">Earning</th>
<th style="width:inherit; background-color: #448AFF"> Pay Mode </th>
<th style="text-align: right; background-color: #448AFF">Amount</th>
</tr>
<s:url var="i" value="1" />
<tr>
<th class="form-control" style="width:inherit">Basic Salary</th>
<td style="text-align: right">Online</td>
<td style="text-align: right">54000</td>
</tr>
<tr>
<th class="form-control" style="width:inherit">House Rent Allowance</th>
<td style="text-align: right">Online</td>
<td style="text-align: right">5400</td>
</tr>
<tr>
<th class="form-control" style="width:inherit">Dearness Allowance</th>
<td style="text-align: right">Online</td>
<td style="text-align: right">5400</td>
</tr>
<tr>
<th class="form-control" style="width:inherit">Travelling Allowance</th>
<td style="text-align: right">Online</td>
<td style="text-align: right">5400</td>
</tr>
<s:url var="i" value="${i+1}"/>
</table>
</td>
<td width="50%" class="no-padding">
<table id="example-1" class="table fontSize table-bordered dataTable" >
<tr style="font-weight: bolder">
<th style="width:inherit; background-color: #448AFF">Deduction</th>
<th style="text-align: right; background-color: #448AFF">Amount</th>
</tr>
<s:url var="i" value="1" />
<%--<c:forEach items="${empSalaryDeductionList}" var="el">--%>
<%--<c:if test="${el.payCode!='998'}">--%>
<tr>
<th class="form-control" style="width:inherit">${el.payCodeDesc}</th>
<td style="text-align: right" >${el.payMode == 2 ? el.newTaxAmount : '0'}</td>
<!--<td style="text-align: center" > ${el.payMode == 5 || el.payMode == 4 ? el.newTaxAmount : '0' }</td>-->
</tr>
<tr>
<th class="form-control" style="width:inherit">PF</th>
<td style="text-align: right">2000</td>
</tr>
<s:url var="i" value="${i+1}"/>
</table>
</td>
</tr>
<tfoot>
<tr>
<td>
<table class="table table-bordered">
<tr>
<td colspan="2">Total Earning (INR)</td>
<td align="right">70,200</td>
</tr>
</table>
</td>
<td>
<table class="table table-bordered">
<tr>
<td>Total Deduction (INR)</td>
<td style="text-align: right">2000</td>
</tr>
</table>
</td>
</tr>
</tfoot>
</table>
<table id="example-1" class="table fontSize table-bordered dataTable" >
<td align="right">
<table id="example-1" style="width:300px; height: 50px;" class="table fontSizeNetPay table-bordered dataTable">
<tr style="font-weight: bolder">
<th style="width:inherit; background-color: #448AFF">NET PAY<small> (INR)</small></th>
<th style="text-align: right">68,200</th>
</tr>
</table>
</td>
</table>
</div>
</section>
</div>
</div>
<div class="clearfix"></div>
<%@include file="../common/footer.jsp" %>
</body>
</html>
我想在整个布局中添加边框，如果您仔细观察html代码，会发现3个或更多表，其中一个是主表，而另一些则嵌套在td
对于每个部分，我使用了不同的表格标签
现在我要给每张桌子都合理的边框，请帮助我
请参阅codepen
答案 0 :(得分：0)
这是你的意思吗？
html：
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Salary Slip : ${initParam['applicationName']}</title>
<%@include file="../common/include.jsp" %>
<style>
table th
{
background-color:#448AFF;
}
#empName
{
background-color:#ffffff;
}
#woSpTable > thead > tr:nth-child(2) > th:nth-child(1),
#woSpTable > thead > tr:nth-child(2) > th:nth-child(2),
#woSpTable > thead > tr:nth-child(2) > th:nth-child(3)
{
color:#ffffff;
}
#example-1 > tbody > tr:nth-child(1) > th:nth-child(1),
#example-1 > tbody > tr:nth-child(1) > th:nth-child(2),
#example-1 > tbody > tr:nth-child(1) > th:nth-child(3),
#example-1 > tbody > tr:nth-child(1) > th:nth-child(4),
#example-1 > tbody > tr:nth-child(1) > th:nth-child(5)
{
color:#ffffff;
}
#woSpTable >tbody >tr >td:nth-child(1),
#woSpTable >tbody >tr >td:nth-child(3),
#woSpTable >tbody >tr >td:nth-child(5),
#woSpTable >tbody >tr >td:nth-child(7),
#woSpTable >tbody >tr >td:nth-child(9)
{
font-weight: bold;
}
.fontSizeNetPay
{
font-size: 18px;
}
.iconDetails {
margin-left:2%;
float:left;
height:55px;
}
.container2 {
width:100%;
height:auto;
padding:1%;
}
</style>
</head>
<body class="page-body skin-facebook horizontal-menu-skin-facebook user-info-navbar-skin-navy">
<%@include file="../common/top_settings.jsp" %>
<div class="page-container" >
<%@include file="../common/left_menu.jsp" %>
<div class="main-content">
<%@include file="../common/header.jsp" %>
<!-- don't say class twice -- <section class="profile-env" class="border"> -->
<!-- instead say it once and separate class names with a space: -->
<section class="profile-env border">
<div class="panel-heading " style="text-align: center">
<h2>SALARY SLIP</h2>
</div>
<div class="panel panel-body">
<div class='container2'>
<div>
<img src="<%=ProjectConfig.resourcePath%><%=ProjectConfig.departmentLogoDark%>" height="55" class="pull-right iconDetails"style="margin-bottom:10px; "/>
</div>
<div >
<h4 style="margin-top:10px">Employee Salary Detail For Month-Year(${yearMonth})</h4>
</div>
</div>
<table id="woSpTable" align="center" class="table table-bordered fontsize" >
<thead>
<tr><th colspan="7" id="empName" style="border: 0.5px solid #000000" > SUPER ADMINISTRATOR </th></tr>
<tr>
<th colspan="2" bgcolor="#448AFF"> Employee Details</th>
<th colspan="2" bgcolor="#448AFF">Payment & Leave Details</th>
<th colspan="2" bgcolor="#448AFF">Location Details</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tdFontWeight">Employee Code</td>
<td>12345678</td>
<td>Bank details</td>
<td>Axis Bank</td>
<td>Official Location</td>
<td>AKVN Bhopal</td>
</tr>
<tr>
<td>Grade </td>
<td> Class 1 Officer</td>
<td>Account No.</td>
<td>383702104568</td>
<td>Bank Branch</td>
<td>Main Branch</td>
</tr>
<tr>
<td>Pan No </td>
<td>ADEP123456</td>
<td>Paid For Month</td>
<td>November 2018</td>
<td>Account No.</td>
<td>383702104568</td>
</tr>
</tbody>
</table>
<table align="center" class="table table-bordered fontsize" >
<tr>
<td width="50%" class="no-padding">
<table id="example-1" class="table fontSize table-bordered">
<tr style="font-weight: bolder">
<th style="width:inherit; background-color:#448AFF">Earning</th>
<th style="width:inherit; background-color: #448AFF"> Pay Mode </th>
<th style="text-align: right; background-color: #448AFF">Amount</th>
</tr>
<s:url var="i" value="1" />
<tr>
<th class="form-control" style="width:inherit">Basic Salary</th>
<td style="text-align: right">Online</td>
<td style="text-align: right">54000</td>
</tr>
<tr>
<th class="form-control" style="width:inherit">House Rent Allowance</th>
<td style="text-align: right">Online</td>
<td style="text-align: right">5400</td>
</tr>
<tr>
<th class="form-control" style="width:inherit">Dearness Allowance</th>
<td style="text-align: right">Online</td>
<td style="text-align: right">5400</td>
</tr>
<tr>
<th class="form-control" style="width:inherit">Travelling Allowance</th>
<td style="text-align: right">Online</td>
<td style="text-align: right">5400</td>
</tr>
<s:url var="i" value="${i+1}"/>
</table>
</td>
<td width="50%" class="no-padding">
<table id="example-1" class="table fontSize table-bordered dataTable" >
<tr style="font-weight: bolder">
<th style="width:inherit; background-color: #448AFF">Deduction</th>
<th style="text-align: right; background-color: #448AFF">Amount</th>
</tr>
<s:url var="i" value="1" />
<%--<c:forEach items="${empSalaryDeductionList}" var="el">--%>
<%--<c:if test="${el.payCode!='998'}">--%>
<tr>
<th class="form-control" style="width:inherit">${el.payCodeDesc}</th>
<td style="text-align: right" >${el.payMode == 2 ? el.newTaxAmount : '0'}</td>
<!--<td style="text-align: center" > ${el.payMode == 5 || el.payMode == 4 ? el.newTaxAmount : '0' }</td>-->
</tr>
<tr>
<th class="form-control" style="width:inherit">PF</th>
<td style="text-align: right">2000</td>
</tr>
<s:url var="i" value="${i+1}"/>
</table>
</td>
</tr>
<tfoot>
<tr>
<td>
<table class="table table-bordered">
<tr>
<td colspan="2">Total Earning (INR)</td>
<td align="right">70,200</td>
</tr>
</table>
</td>
<td>
<table class="table table-bordered">
<tr>
<td>Total Deduction (INR)</td>
<td style="text-align: right">2000</td>
</tr>
</table>
</td>
</tr>
</tfoot>
</table>
<table id="example-1" class="table fontSize table-bordered dataTable" >
<td align="right">
<table id="example-1" style="width:300px; height: 50px;" class="table fontSizeNetPay table-bordered dataTable">
<tr style="font-weight: bolder">
<th style="width:inherit; background-color: #448AFF">NET PAY<small> (INR)</small></th>
<th style="text-align: right">68,200</th>
</tr>
</table>
</td>
</table>
</div>
</section>
</div>
</div>
<div class="clearfix"></div>
<%@include file="../common/footer.jsp" %>
</body>
</html>
css：
html {
background:brown;
}
/* changed selectors */
.table-bordered,
.border {
border:1px solid yellow;
margin-bottom:2em;
}