The Wiert Corner – irregular stream of stuff

Jeroen W. Pluimers on .NET, C#, Delphi, databases, and personal interests

  • My badges

  • Twitter Updates

    • RT @locuta: Het is echt krankzinnig dat het wordt verboden (!!!!) om mensen te helpen. En dat daar niet veel meer mensen tegen in opstand k… 8 minutes ago
    • RT @Walrathis: Ohjeeminee, Nederlandse luchthavens zorgen zelf wel heel hard voor vliegontmoedigingsbeleid😬 9 minutes ago
    • RT @Walrathis: #KopfTisch mein Flug wurde gerade schon einige Wochen voraus annuliert…..dann gibt es wohl anscheinend kein fittes Personal… 10 minutes ago
    • RT @Walrathis: So isses👉 12 minutes ago
    • RT @locuta: Ja, want ze zijn bang dat het kabinet anders valt. Alsof je een kabinet niet zou moeten láten vallen als het letterlijk middele… 15 minutes ago
  • My Flickr Stream

  • Pages

  • All categories

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 2,909 other followers

Using styles on just html tr to format the borders of table rows

Posted by jpluimers on 2022/09/22

A long time ago, I found out that by default, you could only format td elements in HTML tables: somehow doing that with just tr failed, and I never understood why.

Since I wasn’t doing a lot of html stuff back then, I just lived with the few occurrences and moved on.

A while ago, I needed html tables again, and – since WordPress.com hosted blogs do not allow CSS style sheets – I had to use inline style attributes. That would bloat many td elements, so I did a [Wayback/Archive.is] html table border below row – Google Search, where the first few hits – all on StackOverflow – tremendously helped my to understand why this was the case and how to fix it:

  • In [Wayback/Archive.is] css – Giving a border to an HTML table row, – Stack Overflow, [Wayback/Archive.is] User Jukka K. Korpela – Stack Overflow explains about the various border models, but only shows a a solution having the CSS style sheet in a style element which WordPress.com disallows:
    You can set border properties on a tr element, but according to the CSS 2.1 specification, such properties have no effect in the separated borders model, which tends to be the default in browsers. Ref.: 17.6.1 The separated borders model. (The initial value of border-collapse is separate according to CSS 2.1, and some browsers also set it as default value for table. The net effect anyway is that you get separated border on almost all browsers unless you explicitly specifi collapse.)
    Thus, you need to use collapsing borders. Example:
    <style>
    table { border-collapse: collapse; }
    tr:nth-child(3) { border: solid thin; }
    </style>
    

    From that, I learned about these:

    • [Wayback/Archive.is] Tables: borders
      There are two distinct models for setting borders on table cells in CSS. One is most suitable for so-called separated borders around individual cells, the other is suitable for borders that are continuous from one end of the table to the other. Many border styles can be achieved with either model, so it is often a matter of taste which one is used.
      border-collapse
      Value: collapse | separateinherit
      Initial: separate
      Applies to: table‘ and ‘inline-table’ elements
      Inherited: yes
      Percentages: N/A
      Media: visual
      Computed value: as specified
      This property selects a table’s border model. The value ‘separate‘ selects the separated borders border model. The value ‘collapse‘ selects the collapsing borders model. The models are described below.
    • [Wayback/Archive.is] Tables: separated borders (default)
    • [Wayback/Archive.is] Tables: collapsing borders
  • In [Wayback/Archive.is] Create table with only bottom border in HTML – Stack Overflow, [Wayback/Archive.is] Martin2904 explains how to solve it with CSS style sheets and inline style attributes, but does not link to the “why”:
    Just use the following code-snippet and paste it in you style.css
    table {
      border-collapse: collapse;
    }
    tr{
      border-bottom: 1px solid black;
    }
    <table>
      <tbody>
        <tr>
          <td>Lorem</td>
          <td>Ipsum</td>
        </tr>
      </tbody>
    </table>
    Without using style.css
    <table style="border-collapse: collapse;">
      <tbody>
        <tr style="border-bottom: 1px solid black;">
          <td>Lorem</td>
          <td>Ipsum</td>
        </tr>
      </tbody>
    </table>

–jeroen

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

 
%d bloggers like this: