All geek questions in one place

How to display a beautiful dotted border in a table?

I struggled with CSS for hours to make the perfect spaced dotted line for my table. I tried the border property, created an image and placed it as a background, repeating it along the Y axis and some other things (even in CSS3), but my case is a bit more specific than the ones I discovered, Google: I have variable classes columns and rows in my table, and it seems like I cannot define the entire row with a continuous border.

My CSS:

th { height: 42px; font-weight: bold; font-size: 15px; vertical-align:bottom; padding: 8px 16px; margin-bottom: 5px; border-bottom: 2px dotted #999; }
th.odd { background-color: #e6e6e6; }
th.even { background-color: #ddd; }
td { padding: 16px; }
tr{ border-bottom: 2px dotted #999; }
tr.even { background-color: #eee; }
tr.even td.even { background-color: #e2e2e2; }
tr.odd td.even { background-color: #eaeaea; }

I also tried changing the "border-bottom" to a background image with dots and spaces, as I mentioned earlier.

What I have today:

enter image description here

And I want the dots to be continuous, like this:. ,,,,,,

+4
4

   : , , , . , .

:

  • table radial-gradient. table , .
  • Y td + padding . .
  • Y -1 * ( Y/2) - 2 .
  • background-repeat round, . .
  • td tr , table, , linear-gradient ( , ). , , - .

table { /* to produce the dots via radial gradient */
  background-image: radial-gradient(circle at 50% 50%, black 1px, transparent 2px);
  background-size: 8px 50px; /* size in y-axis is equal to td height + padding top + padding bottom */
  background-position: 2px -27px; /* position in y-axis is -1 * size/2 - 2px */
  background-repeat: round; /* makes dots repeat in round manner */
  border-collapse: collapse;
}
td {
  vertical-align: bottom;
  height: 46px; 
  padding: 2px;
}
tr:nth-child(even) {
  background-image: linear-gradient(#eee, #eee);
  background-size: 100% 46px; /* size in y-axis is height of td */
  background-repeat: no-repeat;
}
tr:nth-child(even) td:nth-child(even) {
  background-image: linear-gradient(#e2e2e2, #e2e2e2);
  background-size: 100% 46px;
  background-repeat: no-repeat;
}
tr:nth-child(odd) td:nth-child(even) {
  background-image: linear-gradient(#eaeaea, #eaeaea);
  background-size: 100% 46px;
  background-repeat: no-repeat;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<table>
  <tr>
    <td>Hello World</td>
    <td>Hello World</td>
    <td>Hello World</td>
  </tr>
  <tr>
    <td>Hello World!!!</td>
    <td>Hello World!!!</td>
    <td>Hello World!!!</td>
  </tr>
  <tr>
    <td>Hello World</td>
    <td>Hello World</td>
    <td>Hello World</td>
  </tr>
  <tr>
    <td>Hi There!!!</td>
    <td>Hi There!!!</td>
    <td>Hi There!!!</td>
  </tr>
</table>
<br/>
<table>
  <tr>
    <td>Lorem Ipsum Dolor Sit Amet</td>
    <td>Lorem Ipsum Dolor Sit Amet</td>
    <td>Lorem Ipsum Dolor Sit Amet</td>
  </tr>
  <tr>
    <td>Lorem Ipsum Dolor</td>
    <td>Lorem Ipsum Dolor</td>
    <td>Lorem Ipsum Dolor</td>
  </tr>
  <tr>
    <td>Lorem Ipsum Dolor Sit</td>
    <td>Lorem Ipsum Dolor Sit</td>
    <td>Lorem Ipsum Dolor Sit</td>
  </tr>
  <tr>
    <td>Lorem Ipsum</td>
    <td>Lorem Ipsum</td>
    <td>Lorem Ipsum</td>
  </tr>
</table>

, , , td - ( , ). linear-gradient td background-*. , tr td .

table {
  border-collapse: collapse;
  border-spacing: 0;
  margin: 12px;
  font-family: Arial;
  color: #333;
  font-size: 13px;
  background-image: radial-gradient(circle at 50% 50%, #999 1px, transparent 1px);
  background-size: 4px 2px;
  background-repeat: round;
}
td {
  padding: 16px;
  border-bottom: 2px solid transparent;
}
tr.odd td.odd {
  background: #fff padding-box;  /* the padding-box property is to prevent the background from being present under the 2px transparent border area */
}
tr.even td.odd {
  background: #eee padding-box;
}
tr.even td.even {
  background: #e2e2e2 padding-box;
}
tr.odd td.even {
  background: #eaeaea padding-box;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<table>
  <tr class="odd">
    <td class="odd">Lorem Ipsum Dolor Sit Amet</td>
    <td class="even">Lorem Ipsum Dolor Sit Amet</td>
    <td class="odd">Lorem Ipsum
      <br>Dolor Sit Amet</td>
  </tr>
  <tr class="even">
    <td class="odd">Lorem Ipsum
      <br>Dolor
      <br>Sit
      <br>Amet</td>
    <td class="even">Lorem Ipsum Dolor Sit Amet</td>
    <td class="odd">Lorem Ipsum Dolor Sit Amet</td>
  </tr>
  <tr class="odd">
    <td class="odd">Lorem Ipsum Dolor Sit Amet</td>
    <td class="even">Lorem Ipsum Dolor Sit Amet</td>
    <td class="odd">Lorem Ipsum Dolor Sit Amet</td>
  </tr>
  <tr class="even">
    <td class="odd">Lorem
      <br>Ipsum
      <br>Dolor
      <br>Sit
      <br>Amet</td>
    <td class="even">Lorem Ipsum Dolor Sit Amet</td>
    <td class="odd">Lorem Ipsum Dolor Sit Amet</td>
  </tr>
</table>

+4

border-left : 1px solid white . , <div>. .

.row {
  border-bottom-style: dotted;
  border-width: 1px;
  height: 20px;
}
.columnG {
  background-color: gray;
  float: left;
  width: 50%;
  height: 20px;
}
.columnW {
  background-color: white;
  float: left;
  width: 50%;
  height: 20px;
}
<div class="row">
  <div class="columnG">
    XXXX
  </div>
  <div class="columnW">
    XXXX
  </div>

</div>
<div class="row">
  <div class="columnG">
    XXXX
  </div>
  <div class="columnW">
    XXXX
  </div>

</div>
+4

radial gradient . "" range , .

$('input').on('input', function(){
  $('tr').css('background-size', $(this).val() + 'px 4px'); 
  $('#num').html($(this).val());
});
table {
  width: 400px;
  border-spacing: 0;
}
th {
  text-align: left;
}
tr {
  background: radial-gradient(circle at bottom, black 1px, transparent 1.5px) repeat-x bottom;
  background-size: 5px 4px;  
}
tr:first-child {
  font-weight: bold;
}
tr:nth-child(odd) {
  background-color: #eee;
}
td {
  padding: 5px;
  /*border-bottom:1px dotted #aaa;*/
  /*background: radial-gradient(circle at bottom, black 1px, transparent 1.5px) repeat-x bottom;
  background-size: 5px 4px;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tbody>
      <tr>
        <td>asdf</td>
        <td>asdf</td>
        <td>asdf</td>
        <td>asdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdf</td>
        <td>asdf</td>
        <td>asdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdf</td>
        <td>asdf</td>
        <td>asdf</td>
      </tr>
      <tr>
        <td>asdf</td>
        <td>asdf</td>
        <td>asdf</td>
        <td>asdf</td>
      </tr>
    </tbody>
</table>
<br />
<input type="range" value="5" min="5" max="15" />
<pre>background-size: <span id="num">5</span>px 4px;</pre>
+2

I had to use the tr> td> div approach to get a beautiful dashed border. If you place the dashed border in either td or tr, the strokes collide with each other depending on the length of td, which creates a strange effect when the dashes are longer than they should be.

const RowBorder = styled('div')'
  border-top: 1px dashed black;
  width: 100%;
';
return (
  <table>
    <thead>
      <tr>
        <td colSpan="6">
          <RowBorder />
        </td>
      </tr>
      <tr>
        <td>Col1</td>
        <td>Col2</td>
        <td>Col3</td>
        <td>Col4</td>
        <td colSpan="2">Col5</td>
      </tr>
      <tr>
        <td colSpan="6">
          <RowBorder />
        </td>
      </tr>
    </thead>
    <tbody>{rows}</tbody>
  </table>
)
0
source

Source: https://habr.com/ru/post/1614472/

More articles: