HTML Converting Table tr tb to div and css. How to fix width for div tdRSS

2 replies

Last post Apr 18, 2020 01:15 AM by bruce (sqlwork.com)

‹ Previous Thread|Next Thread ›

Shortcuts

- Reply
comicrage
Member

46 Points

283 Posts
HTML Converting Table tr tb to div and css. How to fix width for div td

Apr 08, 2020 01:58 PM|comicrage|LINK
I am converting a table with tbody, tr, and td to div with css styling. Before the changes, I have a table with 3 columns which each contains a react js component.

All columns are aligned next to each other but the columns are not fixed width. On initial page loading, a component may have a smaller width while another column control has a larger width. The div column will not look equal width dispite their content. How do I make the css styling of a display: table-cell a fixed width?

y help is appreciated

CSS:
```
.rTable
  display: table
  width: 100%

.rTableRow
 display: table-row

.rTableCell
 display: table-cell
 min-width: 49%
 max-width: 49%

.rTableBody
 display: table-row-group
```
JSX:
```
<div className="rTable">
  <div className="rTableRow">
    <div width="2% className="rTableCell">
       <leftPanelControl/>
    </div>
    <div width="49%" className="rTableCell">
       <tableControl1/>
    </div>
    <div width="49%" className="rTableCell">
       <tableControl2/>
    </div>
  </div>
</div>
```

Sean Fang

Participant

1110 Points

299 Posts

Re: HTML Converting Table tr tb to div and css. How to fix width for div td

Apr 09, 2020 02:59 AM|Sean Fang|LINK

Hi comicrage,

I am not using react js, so I would use plain HTML to display how to make the width working.

I suggest you set the "width" property in style instead of directly using "width" as an attribute. It is not a valid attribute for div element in XHTML5.

<head runat="server">
    <title></title>
    <style>
        .rTable {
            display: table;
            table-layout: fixed;
            width: 100%
        }

        .rTableRow {
            display: table-row;
            width: 100%;
        }


        .rTableCell {
            display: table-cell;
            min-width: 49%;
            max-width: 49%;
            
        }


        .rTableBody {
            display: table-row-group;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div class="rTable">
            <div class="rTableRow">
                <div style="width: 2%;background-color:lightgray;word-wrap:break-word;" class="rTableCell">
                    <label>dadsdadsadasdasdsadasdaddadsadasdsadasd</label>
                </div>
                <div  style="width: 49%;background-color: grey" class="rTableCell">
                    <table>
                        <tr>
                            <td>AAAA</td>
                            <td>BBBB</td>
                        </tr>
                        <tr>
                            <td>CCCC</td>
                            <td>DDDD</td>
                        </tr>
                    </table>
                </div>
                <div style="width: 49%;background-color: darkgray" class="rTableCell">
                    <table>
                        <tr>
                            <td>AAAAAAAA</td>
                            <td>BBBBBBBB</td>
                        </tr>
                        <tr>
                            <td>CCCCCC</td>
                            <td>DDDDDD</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        <div class="rTable">
            <div class="rTableRow">
                <div width="2%" style="background-color:lightgray;word-wrap:break-word;" class="rTableCell">
                    <label>dadsdadsadasdasdsadasdaddadsadasdsadasd</label>
                </div>
                <div width="49%"  style="background-color: grey" class="rTableCell">
                    <table>
                        <tr>
                            <td>AAAA</td>
                            <td>BBBB</td>
                        </tr>
                        <tr>
                            <td>CCCC</td>
                            <td>DDDD</td>
                        </tr>
                    </table>
                </div>
                <div width="49%" style="background-color: darkgray" class="rTableCell">
                    <table>
                        <tr>
                            <td>AAAAAAAA</td>
                            <td>BBBBBBBB</td>
                        </tr>
                        <tr>
                            <td>CCCCCC</td>
                            <td>DDDDDD</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </form>
</body>

Comparison:

Hope this can help you.

Best regards,

Sean

- Reply
bruce (sqlwo...
All-Star

55574 Points

14302 Posts

Re: HTML Converting Table tr tb to div and css. How to fix width for div td

Apr 18, 2020 01:15 AM|bruce (sqlwork.com)|LINK

Divs don’t support a width attribute, you must use style. Also if you do not specify an overflow behavior, the the content will push the width. Also percent widths only work, if the parent has a width. If you are setting min, and the the same, just use width.

use the browsers css debugger to determine your issue.

bruce (sqlwork.com)

‹ Previous Thread|Next Thread ›