CODEWITHSUNDEEP
htmlcss
C.Astraea
C.Astraea

Reputation: 185

fixed height (table) with rows that overflow going on a second column

Probably this is not possible ? I have a table with 3 columns like this https://jsfiddle.net/ryvL02de/ I would like for rows overflowing the height to go on a second column on the right side instead.

Most likely this is possible with divs though ? Not really set on a table solutions enter image description here

    <tr>
             <td>B-111-aaa</td>
             <td>08:00</td>
             <td>Firstname Lastname</td>
           </tr>
           <tr>
            <td>B-111-aaa</td>
            <td>08:15</td>
            <td>Firstname Lastname</td>
          </tr>

Upvotes: 1

Views: 121

Answers (2)

rohit
rohit

Reputation: 368

Your question looks like confusing one. If you are looking for, column data should not display overflowing to next column. then you can use style property for column as style='min-width:100px' So data automatically displayed in readable format to user under appropriate columns.

More cleaner code can be,

`

<style>
.fixed-width-Column{
   min-width:100px;
   text-align:left;
}
</style>

`

Your HTML:

`

<tr><th class="fixed-width-Column">NrAuto</th>
<th class="fixed-width-Column">Ora</th>
<th class="fixed-width-Column">Resp</th>
</tr>

`

Upvotes: 0

Anil
Anil

Reputation: 19

CSS : class - space.{white-space:pre-line}
<tr>
   <td class="space">B-111-aaa</td>
   <td>08:00</td>
   <td>Firstname Lastname</td>
   </tr>
<tr>
   <td class="space">B-111-aaa</td>
   <td>08:15</td>
   <td>Firstname Lastname</td>
 </tr>

Upvotes: 1

Related Questions