CODEWITHSUNDEEP
htmlcsshtml-table
oleedd
oleedd

Reputation: 446

How to hide the border between 2 cells while keeping them separate?

How can I hide the border between those two cells while keeping them separate in the HTML code (i.e. not merging the cells using a colspan="2")? The sense of using two separate cells instead of one merged cell is to have the user-select: none attribute only for the first cell.

The default look of the borders (see image) should be kept as far as possible.

<table border=1>
  <tr>
    <td style="user-select: none">1)</td>
    <td>Javascript</td>
  </tr>
</table>

The expected result:
enter image description here

I use Chrome.

Upvotes: 0

Views: 1166

Answers (3)

Johannes
Johannes

Reputation: 67778

You can use the following settings:

table {
  border-collapse: collapse;
  border: double;
}

tr:first-child>td:first-child {
  border-right: none;
}

tr:first-child>td:nth-child(2) {
  border-left: none;
}
<table border=1>
  <tr>
    <td style="user-select: none">1)</td>
    <td>Javascript</td>
  </tr>
</table>

Version 2: Default borders - only possible with interruptions on the inner borders:

tr:first-child>td:first-child {
  border-right: none;
}

tr:first-child>td:nth-child(2) {
  border-left: none;
}
<table border=1>
  <tr>
    <td style="user-select: none">1)</td>
    <td>Javascript</td>
  </tr>
</table>

Version 3: nested table in merged cell:

table table {
  border: none;
}
<table border=1>
  <tr>
    <td colspan="2">
      <table>
        <tr>
          <td style="user-select: none">1)</td>
          <td>Javascript</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Upvotes: 2

wangdev87
wangdev87

Reputation: 8751

You can customize the table border style. Replace red and blue color as you want.

table {
  border: 1px solid red;
  padding: 4px;
  position: relative;
}

table:before {
  border: 1px solid blue;
  content: "";
  display: block;
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
}

td {
  border: none;
}
<table border=1>
  <tr>
    <td style="user-select: none">1)</td>
    <td>Javascript</td>
  </tr>
</table>

Upvotes: 1

Nirali Akabari
Nirali Akabari

Reputation: 78

td {
  border: none;
}
table {
  border: double;
}
<table border=0>
  <tr>
    <td style="user-select: none">1)</td>
    <td>Javascript</td>
  </tr>
</table>

Also you can do is simply just give border=0 without giving style attribute Check this snippet.

Upvotes: 1

Related Questions