Why isn't the border displayed around the tr element?

Question

Why isn't the border displayed around the tr element?

It appears that browsers like Chrome and Firefox may not display borders on tr elements, but they do render the border when the selector is table tr td.

How can I apply a border to a tr element?

My attempt, which has been unsuccessful:

table tr {
  border: 1px solid black;
}

<table>
  <tbody>
    <tr>
      <td>
        Text
      </td>
    </tr>
  </tbody>
</table>

http://jsfiddle.net/edi9999/VzPN2/

Another related question can be found here: Set border to table tr, works in everything except IE 6 & 7, although it seems to work on all browsers except for Internet Explorer.

html css html-table

Answer 1

Answer №1

Include this in your stylesheet:

table {
  border-collapse: collapse;
}

Check it out in JSFiddle.

The reasoning behind this behavior is well explained in the CSS specification:

There are two main models for setting borders on table cells in CSS. One is best for creating individual separated borders around cells, while the other is ideal for continuous borders that span the entire table.

... and when using the collapse setting:

In the collapsing border model, you can define borders that encompass all or a portion of a cell, row, row group, column, or column group.

Answer 2

Include this in your stylesheet:

table {
  border-collapse: collapse;
}

Check it out in JSFiddle.

The reasoning behind this behavior is well explained in the CSS specification:

There are two main models for setting borders on table cells in CSS. One is best for creating individual separated borders around cells, while the other is ideal for continuous borders that span the entire table.

... and when using the collapse setting:

In the collapsing border model, you can define borders that encompass all or a portion of a cell, row, row group, column, or column group.

Answer 3

Answer №2

You can achieve a border-like effect in a table with separated borders using CSS box-shadow:

table tr {
  box-shadow: 0 0 4px #ccc;
}

Answer 4

You can achieve a border-like effect in a table with separated borders using CSS box-shadow:

table tr {
  box-shadow: 0 0 4px #ccc;
}

Why isn't the border displayed around the tr element?

Answer №1

Answer №2

Similar questions

Implementing the rotation of an element using 'Transform: rotate' upon loading a webpage with the help of Jquery, Javascript, and

Scrolling through the page, press the "Read Less"

I'm having an issue with Internet Explorer where the link doesn't function properly when I enclose the content within an <a> tag. Could anyone

Remove Bootstrap-Table's box-shadow on the search bar's delete button

Ways to identify when the scroll bar reaches the end of the modal dialog box

Combining the Power of Bootstrap with Yii Framework

Ways to add vertical dimension to an image without distorting it

PHP and jQuery to create an autocomplete text input feature

Conceal overflow content within a Bootstrap btn-group using CSS styling

Having trouble getting my CSS gradient animation to work

The animation feature of MDBootstrap Angular Material does not seem to be functioning as intended when applied to

Exploring the differences between Zurb Foundation 6's app.scss and _settings.scss files

Customizing Material UI Popover CSS classes within a Select component in a React application

Is it possible to send multiple HTML input values to a Google Spreadsheet using only JavaScript?

"Enhance Your Website with Drag-and-Drop Cart Functionality using HTML

Combine multiple jQuery click functions into a single function

Create a scrollable Bootstrap table without impacting the layout grid system

Clickable boxes for selecting options (Ajax and JavaScript)

Adding text to an existing div element using jQuery and ensuring the div tag automatically adjusts its height according to the text length

Toggle textboxes using jQuery depending on the radio button choice