CODEWITHSUNDEEP
cssgoogle-chrome
veta
veta

Reputation: 736

CSS resize on table cells does not allow width reduction

I have the following code here:

table {
  border-collapse: collapse;
  border-spacing: 0px;
  resize: both;
}
td {
  border: 2px solid black;
  padding: 10px 20px 10px 20px;
  margin: 0px;
  resize: both;
  overflow: auto;
}
div {
  resize: both;
  overflow: auto;
  width: 120px;
  height: 120px;
  border: 1px solid black;
}
<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

<br>

<div></div>

It doesn't work in Chrome, Safari or IE.

How should I fix it?

Upvotes: 0

Views: 3067

Answers (2)

misterManSam
misterManSam

Reputation: 24702

When you resize an element using the CSS resize property, a CSS height/width are applied inline to that table cell.

Example:

Example Example markup

Now, let's resize the cell below it so that the width is smaller:

Example 2 Example markup 2

It doesn't work, the width of the top cell does not change and the column remains the width of its largest cell.

This particular behaviour is not a bug, it is a limitation of the resize property. To get the result that you want, you would need to adjust the width of all the cells in the column, when one is resized. This would require javascript.

Note: I'm not saying that Chrome (tested 44.0.2403.130 m) doesn't have bugs using the resize property on table cells, it does display very buggy behaviour.

Upvotes: 1

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

Maybe the bug is your code. You may not to allow resize tables and tds. You can resize divs inside your td and it was correct. Table and cell resizing is not allowed in firefox and in webkit browsers it is dangerous.

You can make something like this:

    <table>
        <tr>
            <td><div></div></td>
            <td><div></div></td>
            <td><div></div></td>
        </tr>
        <tr>
            <td><div></div></td>
            <td><div></div></td>
            <td><div></div></td>        
        </tr>
        <tr>
            <td><div></div></td>
            <td><div></div></td>
            <td><div></div></td>       
        </tr>   
    </table>
    <br>
    <div></div>

And the css

    table, td { resize: none; }
    table td div { min-width: 50px; min-height: 50px; resize: both; }

Upvotes: 1

Related Questions