代码之家 › 专栏 › 技术社区 › kevin

如何给HTML表格的正文填充?

css html

kevin · 技术社区 · 7 年前

镀铬不尊重车身上的边框。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>

图像:

模板目标
火狐
铬

0 回复 | 直到 7 年前

Iftieaq 7 年前

第一:

第二:

最好的做法是将css应用于td和th,而不是tr。

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;
}

<table class="body-core-table">
  <thead>
    <tr>
      <th colspan="2">Job Description <button class="btn">EDIT</button></th>
    </tr>
  </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>

我没有花太多时间让它看起来像,但我认为你有你的解决办法。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前