CODEWITHSUNDEEP
htmlcss
kevin
kevin

Reputation: 3508

How do you give the HTML table body padding?

I am trying to create a table that matches the template provided, I have tried multiple different solutions provided here on stackoverflow most completely fail, while others only partially work, like the example below.

Chrome doesn't respect the borders made on the body. FireFox does, but it creates strange artifacts at the bottom of the table.

I have also tried adding padding to the body as well by wrapping it in a container, but that behaved strangely as well.

.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>

Images:

  1. Template target
  2. Firefox
  3. Chrome

enter image description here

Firefox Result Chrome Result

Upvotes: 0

Views: 1089

Answers (1)

Iftieaq
Iftieaq

Reputation: 1964

First: You need to wrap your th inside a tr.

Second: There is no point of using two th here, one th with colspan="2" will do the job.

Third: It's always best practise to apply css to td and th, not on tr.

I have an example for you. I actually get rid of most of the style you wrote and used my own. Here is a sample.

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>

I didn't put much time making it look similar but I think you have your solution.

Upvotes: 1

Related Questions