Changing visible length of border-top in a table

**sterlingcooper** · 05-16-2016, 08:59 PM

Hi, I've been learning more about pseudo styles in CSS, and I have a horizontal border in my table that normally I would have done with an hr tag. With an hr tag I could limit the width of the rule, but since I'm using border-top instead I'm not sure how to make it line up with the content that is above it. The gray line goes way past the text that is above it, I would like it to end aligned right with the text. Is there a way to do this without adding more HTML? Thanks!

In my CSS the line is:

Code:

table#product thead th{border-top: 2px solid #D3D3D3; color: black; padding-bottom: 3px;}

Full code:

Code:

<body>
  <div id="wrap">
  <table id="product">
 
    <tfoot>
      <tr>
        <td colspan="8">Fine print text goes here. Fine print text goes here. Fine print text goes here.</td>
      </tr>
    </tfoot>
  
    <thead class="top">
      <tr>
        <th>Heading A</th>
        <th>Heading 2</th>
        <th>Heading <br />3</th>
        <th>Heading <br />4</th>
        <th>Heading <br />5</th>
        <th>Heading 6</th>
        <th>Heading 7</th>
        <th>Heading 8</th>
      </tr>
    </thead>

    <tbody>
    <tr>
      <td>Product Name</td>
      <td>Info 2</td>
      <td>Info 3</td>
      <td>Info 4</td>
      <td>Info 5</td>
      <td>Info 6</td>
      <td>Info 7</td>
      <td>Info 8</td>
    </tr>
    
    <tr>
      <td>Product Name</td>
      <td>Info 2</td>
      <td>Info 3</td>
      <td>Info 4</td>
      <td>Info 5</td>
      <td>Info 6</td>
      <td>Info 7</td>
      <td>Info 8</td>
    </tr>

    <tr>
      <td>Product Name</td>
      <td>Info 2</td>
      <td>Info 3</td>
      <td>Info 4</td>
      <td>Info 5</td>
      <td>Info 6</td>
      <td>Info 7</td>
      <td>Info 8</td>
    </tr>
    <tr class="spacer"></tr>
    <thead>
      <tr>
        <th>Heading B</th>
        <th>Heading 2</th>
        <th>Heading <br />3</th>
        <th>Heading <br />4</th>
        <th>Heading <br />5</th>
        <th>Heading 6</th>
        <th>Heading 7</th>
        <th>Heading 8</th>
      </tr>
    </thead>
    
    <tr>      
      <td>Product Name</td>
      <td>Info 2</td>
      <td>Info 3</td>
      <td>Info 4</td>
      <td>Info 5</td>
      <td>Info 6</td>
      <td>Info 7</td>
      <td>Info 8</td>
    </tr>

    <tr>
      <td>Product Name</td>
      <td>Info 2</td>
      <td>Info 3</td>
      <td>Info 4</td>
      <td>Info 5</td>
      <td>Info 6</td>
      <td>Info 7</td>
      <td>Info 8</td> 
    </tr>
    
    <tr>
      <td>Product Name</td>
      <td>Info 2</td>
      <td>Info 3</td>
      <td>Info 4</td>
      <td>Info 5</td>
      <td>Info 6</td>
      <td>Info 7</td>
      <td>Info 8</td>
    </tr>
    <tr class="footSpacer"></tr>
    
    </tbody>
  </table>
  </div>
  
    


</body>

Code:

  body {font-family: arial, helvetica, sans-serif; font-size: 16px; color:#696969;}
  
  #wrap {border: 1px solid blue; padding-left: 10px; float: left;} 
  
  table#product { border-collapse:collapse;}
  
  table#product thead th{border-top: 2px solid #D3D3D3; color: black; padding-bottom: 3px;}
  
  table#product thead.top th{border-top: 2px solid transparent;}
 
  table#product thead th:before {content:'.'; color:transparent; display: block; font-size: 8px;}
  table#product tr:last-of-type:after {content: '.'; color:transparent; display: block;font-size: 8px; }

  table#product thead th:nth-child(1) {width:30%;}
  table#product thead th:nth-child(2) {width:10%;}
  table#product thead th:nth-child(3) {width:10%;}
  table#product thead th:nth-child(4) {width:10%;}
  table#product thead th:nth-child(5) {width:10%;}
  table#product thead th:nth-child(6) {width:10%;}
  table#product thead th:nth-child(7) {width:10%;}
  table#product thead th:nth-child(8) {width:10%;}
  
  table#product th {
    text-align: left;
    vertical-align: bottom;
    font-size: .8em;
    padding-right: 10px;
    font-weight: 700;   
  }
    
  table#product .spacer {}
      
  table#product tr.footSpacer { display: block; height: 25px;}
 
  table#product td {padding-bottom: 3px; font-size: .8em;}

  tfoot {font-style: italic;}

**Sempervivum** · 05-16-2016, 09:38 PM

?? Why is the color of your border "transparent"?

how to make it line up with the content that is above it

Why not assign the border to the content above instead of the table?

**sterlingcooper** · 05-16-2016, 10:23 PM

Hi, good catch--that was the wrong snippet. I had that so that the first one was invisible. I should have posted this one:

Code:

table#product thead th{border-top: 2px solid #D3D3D3; color: black; padding-bottom: 3px;}

The border is just a rule to separate the two entries. Before I would just put an HR to visibly separate the two but I'm trying to do as little HTML as possible. So where it says "Info 8", I want that gray line to stop right there--right now it just keeps going to the edge of the table.

**Sempervivum** · 05-16-2016, 10:47 PM

I do not yet understand your issue. The border should separate the upper and the lower table? The border is at the top edge of the lower table and covers the complete table. What should it do instead? Should there be no border above "Info 8"?

**sterlingcooper** · 05-16-2016, 11:40 PM

Hi--a picture would probably show it better... I want the edge of the gray line to stop where the red line is. Just like the left hand side is flush left with the text, I want the right and side to be flush with the text also. So I want to know if there's any sort of css I could write to tell the border to stop in that area.

I want it to visibly stop there so it looks good, not go to the edge of the table. The only other way I know to do this is with an hr tag.

Thread: Changing visible length of border-top in a table

Thread Tools

Rate This Thread

Changing visible length of border-top in a table

Tags for this Thread

Posting Permissions