inline !important css not working on <table>

Question

I have an issue. I have tried the style 'table style="width:200px!important;"' as inline but still somehow table is of 742 px what could be the reason of it as we know inline important override all other styles. in td I am just printing 1,2,3 garbage smallest values but still no luck.

   <strong><span><?php echo $this->__($this->getHeader()) ?></span></strong>

    <?php $products = $this->getCollection(); ?>
    <?php if (0 < $products->getSize()) { ?>
        <table style="width:200px !important;">

            <tr>
                <?php 
                $i=0;
                foreach ($products as $p) { ?>
                    <td style="text-align:left;">                        
                        1                        
                    </td>
                <?php } ?>
            </tr>


        </table>
    <?php } ?>

can you provide little bit more code or fiddle or something? — Josip Ivic
– Josip Ivic, Commented Nov 3, 2015 at 10:46
Please see sscce.org — A good code example would be pure HTML with the minimum number of rows to reproduce the problem. It wouldn't include any PHP since that doesn't have any effect on the rendering in the browser. — Quentin
– Quentin, Commented Nov 3, 2015 at 10:48
Can you share the resulting html code ? How many columns are there ? — Felix A J
– Felix A J, Commented Nov 3, 2015 at 10:51

Quentin · Accepted Answer · 2015-11-03 10:47:01Z

3

!important will force the value of that property to be 200px.

It won't force the table to conform to that width.

The default table layout model is auto and will adapt the table to fit its contents, no matter what width you specify.

If the 'table' or 'inline-table' element has 'width: auto', the used width is the greater of the table's containing block width, CAPMIN, and MIN.

You need to switch to the fixed layout model if you want to lock a table width below its natural width.

answered Nov 3, 2015 at 10:47

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

inline !important css not working on <table>

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related