2

I want to create a responsive table with bootstrap and I divide the width of the table into 8-2-2 for 3 columns respectively.

Firefox can display it correctly but not in chrome.

<table id="tbl_sample" class="table table-hover">
    <thead>
    <tr>
        <th class="col col-lg-8 col-md-8 col-sm-8 col-xs-8">text1</th>
        <th class="col col-lg-2 col-md-2 col-sm-2 col-xs-2">text2</th>
        <th class="col col-lg-2 col-md-2 col-sm-2 col-xs-2">text3</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td>ABC</td>
            <td>DEF</td>
            <td>HIJ</td>
        </tr>
        <tr>
           <td>ABC</td>
            <td>DEF</td>
            <td>HIJ</td>
        </tr>
    </tbody>
</table>

Any idea? I have attached the full code here https://jsfiddle.net/ocnrm6j7/

bill
  • 101
  • 2
  • 9
  • It looks the same in Chrome and Firefox for me. – depiction Feb 06 '18 at 04:14
  • It looks the same for me too... Just a tip on your table classes, as you are using Bootstrap 4 and the proportion of the table will be the same in all screen sizes, you can use `text1` and `text2`... there is no need to specify all sizes... – caiovisk Feb 06 '18 at 04:21
  • its works same with both browsers try to check that other CSS property not to over right in the browser with **inspector tool**. – A.D. Feb 06 '18 at 04:22
  • If your try the sample in [above](https://jsfiddle.net/ocnrm6j7/) and expand the view, it looks like following [image](https://drive.google.com/open?id=10YGBHoEAWbwJO8Q-1MQuU3NNWNxyrOTg) , it is obviously not in 8-2-2 portion – bill Feb 06 '18 at 05:51
  • yes in chrome the first coll will take up all the space. make your example 4-4-4 and you see it better. i do not know a solution – tibi Jun 06 '18 at 07:57

0 Answers0