locked
HTML Converting Table tr tb to div and css. How to fix width for div td RRS feed

  • Question

  • User956626884 posted

    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>
    Wednesday, April 8, 2020 1:58 PM

All replies

  • User-1330468790 posted

    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

    Thursday, April 9, 2020 2:59 AM
  • User-474980206 posted

    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.

    Saturday, April 18, 2020 1:15 AM