CSS display:table-row does not expand when width is set to 100%

后端 未结 5 715
臣服心动
臣服心动 2020-12-08 01:25

I\'m having a bit of a problem. I\'m using FireFox 3.6 and have the following DOM structure:

5条回答
  •  北海茫月
    2020-12-08 02:01

    If you're using display:table-row etc., then you need proper markup, which includes a containing table. Without it your original question basically provides the equivalent bad markup of:

    
        Type
        Name
    
    

    Where's the table in the above? You can't just have a row out of nowhere (tr must be contained in either table, thead, tbody, etc.)

    Instead, add an outer element with display:table, put the 100% width on the containing element. The two inside cells will automatically go 50/50 and align the text right on the second cell. Forget floats with table elements. It'll cause so many headaches.

    markup:

    Type
    Name

    CSS:

    .view-table
    {
        display:table;
        width:100%;
    }
    .view-row,
    {
        display:table-row;
    }
    .view-row > div
    {
        display: table-cell;
    }
    .view-name 
    {
        text-align:right;
    }
    

提交回复
热议问题