<html>
<head>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/sb-admin.css" rel="stylesheet">
<!-- Titatoggle -->
<link href="titatoggle-dist.css" rel="stylesheet">
</head>
<body>
<table class="table table-striped table-bordered" style="width:70%">
<thead>
<tr>
<th>Fields</th>
<th>Information</th>
</tr>
</thead>
<tbody>
<tr>
<!-- Customer Info -->
<td width="40%">Name</td>
<td width="60%"> <input type="text" name="name" class="form-control" style="display:table-cell; width:100%" placeholder="Enter full name"></td>
</tr>
<tr>
</tr>
<tr>
<!-- NRO POC -->
<td width="40%">Address</td>
<td width="60%"> <input type="text" name="address" class="form-control" style="display:table-cell; width:100%" placeholder="Enter address"></td>
</tr>
<tr>
<!-- Customer organization -->
<td width="40%">Company</td>
<td width="60%">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="organization" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Customer Organiztion
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
我不确定是什么原因导致引导表的前两行(表格条纹)显得暗淡
我不知道如何添加CSS文件,但是我通过以下链接使用了引导模板:https://startbootstrap.com/template-overviews/sb-admin/。我必须删除表的其余部分以确保数据安全,但是除了表的前两行外,它没有其他问题。此外,最初我什至没有表头行,问题仍然存在。感谢任何可以帮助它的人。
答案 0 :(得分:0)
bootstrap表使用第一行作为表头,因此它为粗体。您可以通过在元素中添加其他类来覆盖CSS文件中的this。
tr:first-child td {
background-color: #your_color;
}
或
tr:nth-child td {
background-color: #your_color;
}
或者您可能在表中使用.table-striped
类。