Member Avatar for adaykin

Hello, is there anyway that I can actually make my tables smaller? I tried putting in a value for the width for the td tags, but it didn't seem to do anything. Also I want the table to fit on one page, but changing the width of the table tag to 100% didn't do anything.

  • 3 Contributors
  • 5 Replies
  • 126 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

The table is expanding to fit unbreakable content rather than obeying the width you set. correctly pointed out where widths belong, and covered content reductions, but a couple of CSS/markup techniques give you reliable control without losing data.

Use a fixed layout and explicit columns so the browser respects column widths instead of sizing to content. Wrap the table so only the table scrolls on small screens.

<div class="table-wrap">
  <table class="tight">
    <colgroup>
      <col style="width:20%">
      <col style="width:30%">
      <col style="width:50%">
    </colgroup>
    <!-- rows -->
  </table>
</div>

Then let cells wrap and scale assets with CSS:

.table-wrap { overflow-x: auto; }
.tight { table-layout: fixed; border-collapse: collapse; }
.tight td { overflow-wrap: anywhere; hyphens: auto; }
img { max-width: 100%; height: auto; display: block; }
pre, code { white-space: pre-wrap; word-break: break-word; }

If a single long word or URL is the culprit, insert break opportunities with the <wbr> element or the soft hyphen (&shy;) where appropriate. Use text-overflow: ellipsis only when truncation is acceptable. Troubleshoot by inspecting the offending cell in DevTools, temporarily adding borders to reveal layout, and checking for white-space: nowrap or fixed-width form controls.

See the CSS reference for how table-layout works and for wrapping rules: table-layout (MDN) and overflow-wrap (MDN).

Recommended Answers

All 5 Replies

Member Avatar for jpusdafs

Hello, is there anyway that I can actually make my tables smaller? I tried putting in a value for the width for the td tags, but it didn't seem to do anything. Also I want the table to fit on one page, but changing the width of the table tag to 100% didn't do anything.

Have you tried placing the WIDTH inside the TABLE tag? Such as the following:

<table width="100%">
  </table>

conversely, you can also use CSS to control the width of your table, such as:

<table style="width:100%;">
  </table>

if you are doing table-based design, I would highly recommend that you stick with percentages when defining a width for any given table.

hope this helps.

/jp/

Member Avatar for adaykin

No, that's what I tried changing the width of the table tag to 100%, but the table still overflows, so I have to scroll horizontally to see all of it.

Member Avatar for MidiMagic

If your content won't fit, the table adds scrollbars instead of shrinking the content.

Your content won't fit.

Reduce the size of the content, either by reducing the amount of content, or by reducing its size (font-size styles, etc.).

Member Avatar for adaykin

How would I shrink individual table cells down? I have some that are obviously going farther horizontally than they need to be. I tried changing the % and width for them that they need to be, but it didn't effect them.

Member Avatar for MidiMagic

The table cell will take the width of the widest thing in that column. You can make it wider, but not narrower.

Tricks to shrink the widths of table cells:

- Reduce the font size.

- Use a narrow font (e.g. Arial Narrow).

- Stick a <br /> tag in the text to make it wrap to a new line. This trades width for height.

- Replace a long word with a shorter one.

- reduce the margins and padding on the text.

- Reduce the size of an image in a cell. Often this means copying the image file and making it smaller (but with the same pixels per inch) in a graphics editor.

- Look for hidden items in cells.

- Remove nonbreaking space codes.

- Use colspan to make a title span multiple cells.

- Reduce the number of decimal places in a number.

- Use scientific notation or metric prefixes to reduce the sizes of numbers. And abbr.

9 megaton
9 X 10^6 ton
9e6 ton
18 X 10^9 lb

instead of

18,000,000,000 pounds.

- Put the units of measurement in the header:

WASTE
megaton
9.00
12.50

instead of

WASTE
9.00 megaton
12.50 megaton

- Change some capitals to miniscules.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.