CODEWITHSUNDEEP
javascriptjqueryhtmlcssfrontend
gdut-zdc
gdut-zdc

Reputation: 11

Set percentage width in a table-cell element without specify the table elemen

As we all know,the percentage width is relative to the table element.But what if I don't specify a table element?I try to set width:1% to the table-cell element, it strangely fill the size of the wrapper element.But when I set width:100%,it seems that it didn't change anything.What's the reason behind that?What's the anonymous table element's actual width? 

.wrap{
  background:red;
}
.cell{
  display:table-cell;
  width:1%;
  background:green;
}
<div class="wrap">
  <div class="cell">content in here.</div>
</div>

Upvotes: 0

Views: 139

Answers (2)

Antonio Hern&#225;ndez
Antonio Hern&#225;ndez

Reputation: 466

This is how it works in my mind:

Think of an element with a table-cellproperty as a <td> element, so, what is the 100% width of a table cell? Normally, it's something like you get by defining the full width in percentage (or leaving the value as default). So, by lowering the digit you are forcing the element to behave less like a cell.

Hope that makes sense to you.

Upvotes: 0

David
David

Reputation: 7295

You can not alter the width of a non-existing element.

Render a page with a <td> element without a <table>.

Have a look to the page's source code.

The <td> element is not there, just its content.

The WHATWG's specification defines that <td> can be used in <tr> which, in turn, can be used in <thead>, <tbody>, <tfoot> or <table>.

4.9.9 The td element

Contexts in which this element can be used:

As a child of a tr element.

A <td> without a <tr> (and a <tr> without <table>) is not valid HTML, you are reliying on the browser's implementation.

With most of the browsers that means:

<table> <td> Text </td> </table>

renders to:

<table> <tbody> <tr> <td> Text </td> </tr> </tbody> </table>

but

<tr> <td> Text </td> </tr>

renders to:

Text

Upvotes: 1

Related Questions