0

I used a normal HTML table in Vue for some reason,

<div class="mytable" style="overflow-x:auto">
    <table>
        <thead>
            <tr>
                <th v-for="header in headers">{{header}}</th>
            <tr>
        <thead>
        <tbody>
               <tr v-for="item in items">
                   <td>
                       {{item}}
                   </td>
               </tr>
        </tbody>
    </table>
</div>

Now I set a overflow-x:auto because the result can be very long, the rendering works fine and all. However, when I tried to adjust the width of a column, nothings happens. I tried <td width="300">, I also tried <td style="width:300px">. I even tried editing the width in Google chrome console debugger, but still nothing happens.

Here's a simple image of the current table : enter image description here

deymbwoi
  • 125
  • 3
  • 10

1 Answers1

1

You need to use table-layout: fixed when you want the individual table cells to respect pre-defined CSS widths:

.mytable {
  table-layout: fixed;
}
Terry
  • 63,248
  • 15
  • 96
  • 118
  • I've also tried this one, still no luck. Or maybe it wont change unless I set the width of the th first? does it work that way? or will the automatically adjusts based on 's width? – deymbwoi Apr 02 '20 at 09:03