CODEWITHSUNDEEP
htmlcsshtml-table
flyingbee
flyingbee

Reputation: 621

How to make my table exceed the page limit without fitting to page

Here I have a table like below where I made the width of each column large enough to exceed the page limit. I want the table exceed the page and see a horizontal scroll bar without fitting to the page, but still, it is just using 100% width of the page. Not sure I am doing anything wrong? Thanks for the help!

The code is below and this is the codepen link: https://codepen.io/bi-wu/pen/LYxYXKJ

<table>
  <tr>
    <td style="table-layout: fixed; width: 500px">Alfreds Futterkistea</td>
    <td style="width: 100px">Maria Anders</td>
    <td style="width: 5000px">Germany</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
</table>

Upvotes: 0

Views: 378

Answers (2)

Ramyak Rohan Mohanty
Ramyak Rohan Mohanty

Reputation: 11

you need to understand that the <td> and <tr> are elements (or, "children") of the <table> and usually, children cannot exceed the dimensions (width and/or height) of their parent unless fixed units are used with a huge value, like say 50,000 pixels or something.

I don't recommend doing that, as it can break your code and is just wrong in general. I mean, think about it... how can something which is containing another thing inside it, be smaller than it?

What you can do instead, is to adjust the width of your table. Since you want your table to exceed your page, you have to apply the width to your <table> tag and not the <td> and <tr>. When you do that, it will automatically apply those widths to the td and tr, and you will get your horizontal scroll bar.

Here's what I mean:- https://i.imgur.com/HLNPPOM.png

Edit:- I used a relative unit vw to set the width of the table, which means that the width of the table is now 200% of the total width of screen that you are viewing it on. If you don't know about relative units, I suggest you to learn about it.

Upvotes: 1

nad
nad

Reputation: 1100

You could use the CSS table-layout: fixed; and min-width properties as shown below.

table {
  border-collapse: collapse;
  border: 1px solid black;
  table-layout: fixed;
}

th,
td {
  border: 1px solid black;
}
<table>
  <tr>
    <td style="min-width: 500px">Alfreds Futterkistea</td>
    <td style="min-width: 100px">Maria Anders</td>
    <td style="min-width: 5000px">Germany</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>

</table>

Upvotes: 1

Related Questions