CODEWITHSUNDEEP
html
Pedro Vidal
Pedro Vidal

Reputation: 1

How to skip a cell in a table with HTML?

How do I skip the first cell of the first row with HTML, while maintaining the table border on the rest of the table (like the example in the picture)? I know how to do this with individual cell borders, but I want to keep the outside table border instead with no cell borders. Is there a way, for example, to begin the first row at the second column?

Picture of table - example

Upvotes: 0

Views: 582

Answers (3)

julien.giband
julien.giband

Reputation: 2619

You will need to set your borders per cell rather than globally on your table.

Code could look like

table {
  border: none;
}
table tr:first-child td {
  border-top: 1px solid black;
}
table tr:last-child td {
  border-bottom: 1px solid black;
}

/* ... same for columns with pseudo classes on td */

/* first cell in first row */
table tr:first-child td:first-child {
  border: 1px solid black;
  border-left-color: transparent;
  border-top-color: transparent;
}

I'm letting you figure out the details by yourself

Upvotes: 0

BoltClock
BoltClock

Reputation: 724222

Make an empty cell to represent the cutout (this is valid and recommended by the spec), remove the background from that empty cell, and give it the same border properties as the table, but set its border style to hidden where it overlaps the table's border (in this case, the top and left borders). Any of a table cell's borders whose style is hidden causes any borders that would overlap it in collapsed-borders mode to disappear (CSS2.1, css-tables-3):

table {
  width: 100%;
  border: 1px solid #000;
  border-collapse: collapse;
  border-spacing: 0;
}

th {
  background-color: #56a9ce;
}

th, td {
  font-family: sans-serif;
  text-align: center;
}

tr:first-child > th:first-child {
  background-color: transparent;
  border: 1px #000;
  border-style: hidden solid solid hidden;
}
<table>
  <thead>
    <tr>
      <th></th><th colspan="3">Content</th>
    <tr>
      <th>Content</th><th>Content</th><th>Content</th><th>Content</th>
  </thead>
  <tbody>
    <tr>
      <td>X</td><td>X</td><td>X</td><td>X</td>
    <tr>
      <td>X</td><td>X</td><td>X</td><td>X</td>
    <tr>
      <td>X</td><td>X</td><td>X</td><td>X</td>
  </tbody>
</table>

Upvotes: 1

Huy Chau
Huy Chau

Reputation: 2240

You can use CSS pseudo-class is a keyword. For example, to begin the first row at the second column:

.table tr:first-child > td:ntn-child(2) {
  // Something
}

You can use :not() too.

Upvotes: 0

Related Questions