Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make TD behaving like TR(row) with CSS?

I have a component that create dynamically html table. According to my need, I need to show td tags line by line as a block element not like column. How to do that by using CSS ?

like image 835
Barış Velioğlu Avatar asked Jul 21 '11 09:07

Barış Velioğlu


People also ask

Can we use tr in TD?

You cannot put tr inside td. You can see the allowed content from MDN web docs documentation about td . The relevant information is in the permitted content section. Another way to achieve this is by using colspan and rowspan .

What is TR TD in CSS?

An HTML table consists of one <table> element and one or more <tr>, <th>, and <td> elements. The <tr> element defines a table row, the <th> element defines a table header, and the <td> element defines a table cell. An HTML table may also include <caption>, <colgroup>, <thead>, <tfoot>, and <tbody> elements.

How do you use TR and TD?

The <td> tag defines the standard cells in the table which are displayed as normal-weight, left-aligned text. The <tr> tag defines the table rows. There must be at least one row in the table. The <th> tag defines the header cells in the table which are displayed as bold, center-aligned text.

Can I put TR inside div?

You can't have tr as direct children of a div .


2 Answers

Try this:

td{
    display: table-row
}
like image 195
Shef Avatar answered Sep 23 '22 18:09

Shef


You can do this by applying display: block to the tds:

http://jsfiddle.net/wYA9K/

That works in all modern browsers except IE9..

Using float: left; width: 100% instead makes it also work in IE8/9:

http://jsfiddle.net/gvpzh/

Nothing will make it work in IE7.

like image 30
thirtydot Avatar answered Sep 22 '22 18:09

thirtydot