Skip to content Skip to sidebar Skip to footer

Can't Change Width Of Table Data Element

I'm posting a screenshot of the element in question. You should be able to see, I am applying element-specific styling removing all margin, padding and setting the width to 0px. No

Solution 1:

There is some obscurity to how the width of a table cell (<td>) is defined, as official documentation is unclear and allows some behavior to be defined by the browser. But here are a few characteristics that appear stable across the spectrum of browsers.

Managing the Width of HTML Table Cells <td>

  1. Table with Single Cell In a table that consists of a single cell – in other words, a table with one column and one row – where the width hasn't been explicitly defined in the <table> element, the width can be controlled directly by the <td> element.

    This won't work (the td rule will be ignored):

    table { width: 100%;}
    td {width: 300px;}
    

    The width: 300px fails because the <table> element has a defined width.

    However, this will work:

    /* table { width: 100%;} */td {width: 300px;}
    

    DEMO


  1. Table Column with Multiple Cells To set the width of a table cell in a column with multiple cells the entire column must be adjusted. Any widths assigned to the individual <td>s will be ignored. Simply adjust the width of the table to adjust the width of the <td>s in the column.

    DEMO


  1. Table with Multiple Columns and Multiple Rows To set the width of a table with multiple columns and rows, the Table Column Element (<col>) is ideal because it targets individual columns.

    DEMO


The problem described in the question involves a table cell that won't accept a shorter width assignment. The first realization here is that the table cell by default expands to fill 100% of the column width allotted (learn more about <td> default width). The way to reduce the width of this cell is described above.

HOWEVER, I suspect that in some cases the person wanting to reduce the width of a table cell is actually trying to reduce the width of the content inside the cell (like an image or a form input). In these cases, adjusting the table may be unnecessary. All that would be needed is to adjust the width of the content itself, or its container (div, span, figure, etc.).

In this image, the width of the table cells are at 100%, but the width of the input fields vary.

enter image description here

DEMO


colspan

If in fact the need is to reduce the width of a single cell within a column of multiple cells, then you may want to consider the colspan attribute. With colspan, columns can me merged making cells wider. Cells without colspan assigned will be shorter, and appear even shorter when their adjacent cells are hidden.

In this image, display: none has been applied to the bottom right cell of this 2-column table.

enter image description here

DEMO


So, in the case of your table cell that won't budge, consider adjusting the width of the <table> element (if it's a single column table), assign and adjust a <col> element (if it's a multi-column table), adjust the width of the content directly (if that's the only element you want adjusted), or use colspan.

Sorry I can't be more specific about the exact solution in your case. No code was provided for review. But hopefully one of these methods helps you out.

Post a Comment for "Can't Change Width Of Table Data Element"