html table cell match tr width (non static rows count)

Question

I have such html structure:

<table border=1 >
    <tr> <!--this tr has one <td> that needs to be 100% width-->
        <td></td>
    </tr>
    <tr> <!--this tr has two <td> that each need to be 50% width-->
        <td></td>
        <td></td>
    </tr>
    <tr> <!--this tr has three <td> that each need to be 33.3333% width-->
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr> <!--this tr has one <td> that needs to be 100% width-->
        <td></td>
    </tr>
</table>

how can i do, that for example first tr td is for 100%, second tr two td's are both 50%, but all them for 100% and so over, i need to fill td to tr width, and if there more than one td, to do that they divide this width...

http://jsfiddle.net/ujMgM/

possibly without using js...

update: NO! colspan

The descriptions is underspecified: what should the widths of the third row be? If, in general, the available width should be evenly divided between the cells, please specify this in the question. (Then the answer is generally “you can’t, you must use a structure other than a table.”) — Jukka K. Korpela, Feb 17 '14 at 09:12
@JukkaK.Korpela why? i recieved a good answer by James Donnelly — brabertaser19, Feb 17 '14 at 09:48
Future visitors will not benefit from answers if they do not know what the question is. Your “and so over” suggests equal widths, but you have accepted an answer that does not do that. — Jukka K. Korpela, Feb 17 '14 at 11:48

James Donnelly · Accepted Answer · 2014-02-17T08:51:19.660

1

Using HTML

Just use the colspan HTML attribute:

This attribute specifies the number of columns spanned by the current cell. The default value of this attribute is one ("1").

This means that if your table has a total of 3 columns and you want one cell to span all 3 columns, you'd specify a colspan of "3":

<table border=1 >
    <tr>
        <td colspan="3">
        </td>
    </tr>
    <tr>
        <td colspan="2">
        </td>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
    </tr>
    <tr>
        <td colspan="3">
        </td>
    </tr>
</table>

Using jQuery

You can instead use jQuery to add in the colspan attributes for you:

// Get a reference to the table's tbody element, and define the number of columns
var $tbody = $('table').find('tbody'),
    columns = 3;

// Loop through each tr within the table's tbody
$tbody.find('tr').each(function() {

    // Determine the number of cells, and set the colspan
    var children = $(this).children().size(),
        colspan = columns / children;

    // If the colspan variable is set to *.5, give the first cell higher colspan
    if (colspan % 1 === 0.5) {
        $(this).children('td').attr('colspan', colspan - 0.5);
       $(this).children('td:first').attr('colspan', colspan + 0.5);
    }
    // Otherwise give all cells equal colspan
    else
        $(this).children('td').attr('colspan', colspan);
});

JSFiddle demo.

Note how I'm using the tbody here? Ideally your table should have a tbody element, but most browsers will add this in for you.

edited Feb 17 '14 at 08:51

answered Feb 17 '14 at 08:34

James Donnelly

126,410
34
208
218

@Shaik answered first. – Adrian Enriquez Feb 17 '14 at 08:35
no no, without colspan – brabertaser19 Feb 17 '14 at 08:35
@brabertaser1992 why do you not want to use `colspan`? This is exactly what `colspan` achieves. – James Donnelly Feb 17 '14 at 08:35
1

@AdrianEnriquez it's not a race... – James Donnelly Feb 17 '14 at 08:36
becouse i formirate this code dynamically, and programmist doesn't want to change this part, only i could do this with html+css+js – brabertaser19 Feb 17 '14 at 08:41
@brabertaser1992 I've added a jQuery solution to my answer. – James Donnelly Feb 17 '14 at 08:51
ok, i will look, maybe accept, just that i didn't have 3 or 2 columns = 3; - i didn't know i could have 10 ) or 1 – brabertaser19 Feb 17 '14 at 08:54
@brabertaser1992 your question didn't specify that. In order to dynamically find the size you'd have to loop through each `tr` to find which one has the most cells, and set your variable to that. – James Donnelly Feb 17 '14 at 08:55
@brabertaser1992 like this: http://jsfiddle.net/ujMgM/4/ – James Donnelly Feb 17 '14 at 08:57
1

I like your dedication in the face of shifting requirements and useless comments from some others :) – andyb Feb 17 '14 at 18:15

Shaik Mahaboob Basha · Answer 2 · 2014-02-17T08:40:29.077

You have to use colspan="3" if you want to fit the td for all the three columns.

About colspan:

This attribute contains a non-negative integer value that indicates for how many columns the cell extends. Its default value is 1; if its value is set to 0, it extends until the end of the , even if implicitly defined, that the cell belongs to. Values higher than 1000 will be considered as incorrect and will be set to the default value

colspan Reference mdn

The modified code looks like

<table border=1 >
    <tr>
        <td colspan="3">
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td colspan="2">
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
        </td>
        <td>
        </td>
    </tr>
    <tr>
        <td colspan="3">
        </td>
    </tr>
</table>

Fiddle Demo

score 0 · Answer 3 · edited May 23 '17 at 11:49

0

Use colspan="0"

Or use jQuery to calculate most td in rows and add colspan dynamically.

edited May 23 '17 at 11:49

Community

1
1

answered Feb 17 '14 at 08:39

Justinas

41,402
5
66
96

html table cell match tr width (non static rows count)

3 Answers3

Using HTML

Using jQuery