Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Table With Width -> Too Much Content Expands Table

word break html5 table column width

  • This topic is locked This topic is locked
1 reply to this topic

#1 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts
  • Programming Language:Java, JavaScript, PL/SQL
  • Learning:Python

Posted 16 July 2012 - 03:18 AM

My table has a width of 100%, but is in a div with a fixed width (~570px). I've got 2 of such divs, so I got 2 columns (float left)
My table has 4 columns, so columns aren't THAT wide. I've got 1 column which will contain quite some text, so there will be multiple lines.
Problem is, that column can only hold 37 characters / line. Enough for most words, problematic with URLs or stuff that's just longer.
It will ignore my div's width and just expand the table causing it to "merge" with my other div of the 2nd column.
table-issue2.png



word-break: break-all. Solves the issue of the long words / URLs, but it also splits words which should just have started on the next line.
table-issue.png
It did a good job of splitting the number, but 'economics' and 'bulls h i t' should've stayed in one piece.
And W3 says it word-break doesn't even work in FF.



Fixed table layout isn't really an option since I can't predict the size of columns 2 and 3.
And for those 2 columns I specifically want it to be on 1 line using white-space: nowrap;

Any suggestions are very welcome.


I guess you can work with:
<html>
<head>
<style>
.column{
  width: 574px;
  float: left;
}

#right {
  border-left: solid 3px red;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-family: arial;
}

table td {
  border-bottom: solid 1px;
}
</style>
</head>
<body>
<div id="left" class="column">
<table>
<tr>
  <th>One</th>
  <th>Two</th>
  <th>Three</th>
  <th>Four</th>
<tr>
<tr>
  <td>data1</td>
  <td>data2</td>
  <td>data3</td>
  <td>data4data4data4data4data4data4data4data4data4data4data4data4data4data4data4data4data4 and some other little words which should stay in one piece.</td>
</tr>
<tr>
  <td>data1</td>
  <td>data2</td>
  <td>data3</td>
  <td>data4</td>
</tr>
<tr>
  <td>data1</td>
  <td>data2</td>
  <td>data3</td>
  <td>data4</td>
</tr>
<tr>
  <td>data1</td>
  <td>data2</td>
  <td>data3</td>
  <td>data4data4data4data4data4data4data4data4data4data4data4data4data4data4data4data4data4 and some other little words which should stay in one piece.</td>
</tr>

</table>
</div>
<div id="right" class="column">
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
</body>
</html>

  • 0

#2 RhetoricalRuvim

RhetoricalRuvim

    JavaScript Programmer

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1311 posts
  • Location:C:\Countries\US
  • Programming Language:C, Java, C++, PHP, Python, JavaScript

Posted 16 July 2012 - 12:45 PM

You can try the 'overflow' CSS property.

https://developer.mo...en/CSS/overflow

If the value of that property is 'scroll' , the element will come with scroll bars in case there is too much content in the element. 'visible' is default. 'auto' will decide automatically whether to put scroll bars or not if there is too much content. 'hidden' will hide everything that doesn't fit.


Another thing you could try is JavaScript dynamic HTML DOM working, where you could write a script that uses the HTML DOM to put together the table and decide where to make line-breaks and where not to. I am not sure how you might do this though, probably using the {element object}.offsetWidth property.
  • 0
Regards,
RR





Also tagged with one or more of these keywords: word break, html5, table, column, width

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download