您如何给HTML表主体填充？

Question

我正在尝试创建一个与提供的模板匹配的表，我已经尝试过在此处针对stackoverflow提供的多种不同的解决方案最完全失败，而其他解决方案仅部分起作用，如下面的示例。

Chrome浏览器不尊重机身上的边框。 FireFox可以，但是它会在表格底部创建奇怪的工件。

我还尝试通过将填充物包裹在容器中来向其添加填充物，但这也表现得很奇怪。

.body-core-table {
		width: 60%;
		background-color: #fff;
		border-collapse: collapse;
		}
		thead {
			background-color: $supportColor;
			height: 4rem;
		}
		tbody {
			border-left: 40px solid transparent;
			border-right: 40px solid transparent;
		}
		tr {
			
			border-bottom: 1px solid #999;
		}
		td {
			padding: 1.5rem 0;
			min-width: 145px;
		} 
	}

<table class="body-core-table">
	<thead>
		<th>Job Description</th>
		<th class="table-button"><button class="btn">EDIT</button></th>
	</thead>
	<tbody>
		<tr>
			<td>Position Title</td>
			<td>Customer Service Representative</td>
		</tr>
		<tr>
			<td>Location</td>
			<td>San Fransisco CA</td>
		</tr>
		<tr>
			<td>Employment Type</td>
			<td>Full-time</td>
		</tr>
		<tr>
			<td>Experience</td>
			<td>Mid-level</td>
		</tr>
		<tr>
			<td>Status</td>
			<td>Open</td>
		</tr>
		<tr>
			<td class="td-special">Description</td>
			<td>Lorem ipsum dolor sit amet, ....</td>
		</tr>
		<tr>
			<td>Hiring Lead</td>
			<td>Tom Tizzy</td>
		</tr>
		<tr>
			<td>Approved Salary</td>
			<td>$58,000</td>
		</tr>
	</tbody>
</table>

图片：

1. 模板目标
2. Firefox
3. Chrome

Answer 1

首先：您需要将th包裹在tr中。

第二：这里没有必要使用两个，colspan =“ 2”的一个可以完成任务。

第三步：最好的做法是将css应用于td和th，而不是tr。

我有个例子给你。实际上，我摆脱了您编写和使用的大多数样式。这是一个示例。

folder.example.com

body {
  background-color: #EDF2F6;
  font-family: "Helvetica Neue";
}

.body-core-table {
  width: 600px;
  background-color: #fff;
  border-collapse: collapse;
  margin: 30px auto;
}

thead th {
  background-color: #6E7E95;
  color: #fff;
  text-align: left;
  padding: 10px 20px;
}

thead th button {
  background-color: #7D8BA6;
  color: #fff;
  border: none;
  padding: 5px 7px;
  margin-left: 10px;
}

tr td {
  padding: 12px 15px;
  border-bottom: 1px solid #ccc;
}

我花了很多时间使它看起来很相似，但我认为您有解决方案。