CODEWITHSUNDEEP
csshtml-tablerowbordermargin
shlomocomputer
shlomocomputer

Reputation: 131

Borders and spacing between specific table rows

I am new to CSS and am working on an intraweb application which will render in modern standard browsers (IE support is not necessary). I have spent much time looking for answers on this and other sites, only to find the answers "It's impossible because..." or "Do this hack instead...." but I just won't accept that.

Here's what I need:

  1. A table with one header row and multiple body rows;
  2. A solid border under the header row;
  3. Vertical white space (padding? margin? spacing?) between the header row and first body row only;
  4. Body rows being highlighted on mouse hover.

I couldn't get (2) to be visible until I styled the table border-collapse: collapse;. Fine. But (3) apparently only works with border-spacing, and only on <td> elements (not <tbody> or <tr>), which is anyway disabled by the collapse. Meanwhile, for some unknowable reason, margin's are not recognized for <thead>, <tr>, or <th> elements, but having padding-top on the first row of the body's <td>'s works, except it doesn't, because when I mouse over that first row, the whole margin-which-is-implemented-as-padding gets highlighted as well, which nauseates me.

I know having a few pixels of margin between a table's header and body is like a really out-of-left-field, why-would-anyone-ever-want-that thing to want, but what should I tell you? I'm no cheap date.

Please be as brutal and condescending as you can in pointing out my stupidity in understanding CSS, provided you also either 1) say how to do it without changing the markup (thereby preserving the separation of presentation from content CSS was evidently designed to encourage) or 2) agree with me that CSS is weird.

<head><style>
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  thead {
    border-bottom: 4px solid #123456;
  }
  /*** something goes here ***/
  tbody tr:hover {
    background-color: #ABCDEF;
  }
</style></head>

<body>
  <table>
    <thead>
      <tr><th>Fruit</th><th>Color</th><th>Yummy?</th></tr>
    </thead>
    <tbody>
      <tr><td>Apple</td><td>Green</td><td>Yes</td></tr>
      <tr><td>Banana</td><td>Yellow</td><td>Yes</td></tr>
      <tr><td>Pear</td><td>Brown</td><td>Yes</td></tr>
    </tbody>
  </table>
</body>

Upvotes: 13

Views: 18733

Answers (5)

Nikhil Nanjappa
Nikhil Nanjappa

Reputation: 6632

This would fix your problems without any hacks and ofcourse its completely possible. The updated code(only CSS changes) is shared below with explanations.

Problem 3 :

We can make use of the CSS selector :first-of-type(targeting only the first row) in succession with all the <td> under it and use attribute padding-top. Simple :-)

<tr> cannot have margin values by default. Again hacks are available(above mentioned answers) but I wouldn't go there as you don't want it.

And also since we have used padding, the hover effect would work perfectly on the entire row content. Hence getting the desired change without any markup changes.

Problem 2 :

We can remove the attribute border-collapse from table and instead apply the border on the <th>tags (let the border-spacing: 0 remain or the border would be discontinuous). Simple again :-)

Problem 1 and 4 are already covered. No markup changes as you wished. Here is the Fiddle

So the updated style code would look like

<head><style>
  table {
    border-spacing: 0;
  }
  thead tr th {
    border-bottom: 4px solid #123456;
  }
  tbody tr:hover {
    background-color: #ABCDEF;
  }

  /*** added ***/
  tbody tr:first-of-type td {
    padding-top: 10px;
  }

</style></head>

Upvotes: 2

Luca De Nardi
Luca De Nardi

Reputation: 2321

What about adding an empty row at the beginning like

<tbody>
    <tr><td> </td></tr>
    <tr><td>blablablabla</td></tr>

And use this CSS

tbody tr:first-child td{
    padding-top: 15px;
}
tbody tr:first-child:hover{    
    background-color: transparent;
}

So the padding will be added to first row and first row won't highlight on mouse over? :)

Upvotes: 0

monu
monu

Reputation: 370

All your 4 points are covered there-

  1. First download metro ui css here http://metroui.org.ua/
  2. Include its two css file 1. metro-bootstrap, 2.metro-bootstrap-responsive into your project.

  3. Register that in BundleConfig.

    bundles.Add(new StyleBundle("~/Content/css/metroUI").Include("~/Content/css/metro-bootstrap.css", "~/Content/css/metro-bootstrap-responsive.css"));

  4. Now use class "gr-items" for table

< table id="divAllActivities" class="gr-items">

<thead>
    <tr><th><span>Comment</span></th></tr>
</thead>
<tbody>
    <tr>
        <td><span>OperationDateTime</span></td>
    </tr>
     <tr>
        <td><span>OperationDateTime</span></td>
     </tr>
</tbody>

Hope this is what you want.

Upvotes: -1

YemSalat
YemSalat

Reputation: 21486

In order to apply margin to the first table row you need to make it display: block; first, as margin can only be applied to block elements (including inline-blocks)

But here is another solution using positioning: 

<head><style>
  table {
    border-collapse: collapse;
    border-spacing: 0;
    position: relative; /* Add positioning */
    margin-top: 40px; /* Add some margin */
  }
  thead {
    border-bottom: 4px solid #123456;
  }
  /*** something goes here ***/
  thead {
    position: absolute; /* Position this element absolute */
    top: -40px;  /* And move it up */
  }
  tbody tr:hover {
    background-color: #ABCDEF;
  }
</style></head>

<body>
  <table>
    <thead>
      <tr><th>Fruit</th><th>Color</th><th>Yummy?</th></tr>
    </thead>
    <tbody>
      <tr><td>Apple</td><td>Green</td><td>Yes</td></tr>
      <tr><td>Banana</td><td>Yellow</td><td>Yes</td></tr>
      <tr><td>Pear</td><td>Brown</td><td>Yes</td></tr>
    </tbody>
  </table>
  <p>Thats how its done!</p>
</body>

Basically we apply position: relative; to the table and position: absolute; to thead. Now you can move the thead inside the table using top, bottom, left and right properties. We are going to move it up by 40px using top: -40px; We do not apply position: absolute; to tbody, because if we do - this element will no longer 'strech the page' or in other words all the following elements will ignore its height. (try doing it and see what happens to the following

block) The only thing we got left - is to apply some margin-top to the table itself, moving it down (as we moved the thead up)

Yes, CSS can seem a bit weird from time to time, but this is mostly because we forget how some page elements are supposed to be handled (namely tables and their child elements)

Upvotes: 0

David Thomas
David Thomas

Reputation: 253308

Okay, in order:

1: A table with one header row and multiple body rows:

This is what the elements thead and tbody were designed for:

<table>
    <thead>
        <tr><th>heading one</th><th>Heading two</th></tr>
    </thead>
    <tbody>
        <!--
            all body table rows in here
        -->
    </tbody>
</table>

There's also tfoot (see references), which, if used, must be declared before the tbody element.

2: A solid border under the header row:

    thead tr th {
        border-bottom: 2px solid #000;
    }

Select the th elements within the thead element, the tr selector is probably unnecessary here, and, while it does no harm, can be simplified to: thead th {/*...*/}.

3: Vertical white space (padding? margin? spacing?) between the header row and first body row only. padding, it seems, cannot be applied to the thead, tbody or tr elements, since they're, essentially (I suppose) 'non-visual', so it has to be defined on the td elements. This does, on hover, mean there's a disconcertingly large 'row' occupied by the first row during the :hover (see the next part).

    tbody tr:first-child td {
        padding-top: 1em;
    }

4: Body rows being highlighted on mouse hover.

    tbody tr:hover td {
        background-color: #ffa;
    }

While you can apply a :hover to the currently-hovered cell, and later siblings (with the general sibling ~ combinator) you can't apply a style to siblings that appear previously, so here we're styling the td elements in response to the :hover of their parent tr.

The reason that we have to style the td (rather than directly change the background-color of the tr is because td elements don't typically default to a transparent background, which means the changed/highlighted background-color is 'hidden' by the background-color of the td elements.

JS Fiddle demo.

References:

Upvotes: 0

Related Questions