Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.

# content too wide

15 replies to this topic

### #1 nixx

nixx

• Members
• 159 posts
• OFFLINE
•
• Local time:04:05 AM

Posted 13 April 2009 - 12:41 AM

Hi!

The resolution I'm working on is 1024x768 with a table that has 13 columns. Problem is, the table won't fit since it's too wide. Do you guys have any suggestions on how to fix it?

Thanks!

### #2 burn1337

burn1337

• Banned
• 311 posts
• OFFLINE
•
• Gender:Male
• Local time:12:05 PM

Posted 13 April 2009 - 02:18 AM

Well just wondering why it is 13 columns wide... You could also try doing multi-leveled/dimensional tables...

### #3 nixx

nixx
• Topic Starter

• Members
• 159 posts
• OFFLINE
•
• Local time:04:05 AM

Posted 13 April 2009 - 03:13 AM

it's a requirement.

what are multi-leveled tables?

### #4 groovicus

groovicus

• Security Colleague
• 9,963 posts
• OFFLINE
•
• Gender:Male
• Location:Centerville, SD
• Local time:02:05 PM

Posted 13 April 2009 - 07:47 AM

From a professional standpoint, multilevel/embedded tables are a poor idea. Geir Wavik explains it here very nicely.

If your requirement is for a 13 column table, then your table columns can be no wider that 78 pixels. One characteristic of table cells is that they add pixels on each side for padding space and border space. I can't remember the number right off the top of my head, but say 10 pixels per cell (5 right and 5 left), so 130 pixels total. You are losing nearly two cells worth of space in t13 columns. Are you constraining the column size and padding size? In your code, you can specify those attributes. Do you know how to do that?

### #5 patbox

patbox

• Members
• 456 posts
• OFFLINE
•
• Gender:Male
• Local time:09:05 PM

Posted 13 April 2009 - 12:50 PM

The resolution I'm working on is 1024x768 with a table that has 13 columns. Problem is, the table won't fit since it's too wide. Do you guys have any suggestions on how to fix it?

Try this code, maybe it will work for you:

Edited by groovicus, 13 April 2009 - 01:22 PM.
Code removed

Message from Patbox: I AM LOOKING FOR A GIRLFRIEND (PM if interested) :-)

### #6 groovicus

groovicus

• Security Colleague
• 9,963 posts
• OFFLINE
•
• Gender:Male
• Location:Centerville, SD
• Local time:02:05 PM

Posted 13 April 2009 - 01:24 PM

@patbox, we don't write code for others, especially since it may be homework. We see what they have done, and suggest changes.

### #7 burn1337

burn1337

• Banned
• 311 posts
• OFFLINE
•
• Gender:Male
• Local time:12:05 PM

Posted 13 April 2009 - 03:21 PM

Groovicus - That site explains the difference between using tabled designs and div designs... All of which have some sort of embedding or mult-leveling structure for a better suit of customization.
Though yes with divs, it is not as necessary to use multi-leveled divs, unless you need or want to, to make the design and layout to fit more of what you want it.

### #8 nixx

nixx
• Topic Starter

• Members
• 159 posts
• OFFLINE
•
• Local time:04:05 AM

Posted 13 April 2009 - 08:02 PM

hmm yeah I guess that's fair. Although I'm not really asking for whole codes, I'm just asking if there was a workaround for it like say, maybe hide the other columns first? The table is for tabular data

### #9 groovicus

groovicus

• Security Colleague
• 9,963 posts
• OFFLINE
•
• Gender:Male
• Location:Centerville, SD
• Local time:02:05 PM

Posted 13 April 2009 - 08:31 PM

Hide what columns first? IF you use CSS to set your margins to zero and padding to zero, and you set the cell size to 75 or so, will it fit then? I don't know what you mean by a workaround. You have n pixels of screen real-estate, and you have m pixels of content that you need to make fit. I could fit 120 columns if I only made the columns narrow enough.

I know you weren't asking for the code. You were asking for suggestions on how to fix it. I told you how wide your table cells needed to be in order to fit within those constraints, and I told you that for each cell you add in a row, the document model adds some extra spacing on the sides for padding and border. Then I asked if you knew how to do that. So either I don't understand your question, or I am not communicating effectively.

### #10 nixx

nixx
• Topic Starter

• Members
• 159 posts
• OFFLINE
•
• Local time:04:05 AM

Posted 13 April 2009 - 09:13 PM

Sorry if I can't explain clearly what I wanna to happen

Well here's an example of the table, since the headers and the data in the cells are quite wide, the table would expand. Oh yeah, the table is only 760px wide because there's a sidebar. I made the font-size smaller around 9px, and it fit but is there any other way to make it fit inside the 760px content area?

```<table>
<tr>
<th>Transaction ID</th>
<th>Delivery Unit</th>
<th>Practice</th>
<th>Role</th>
<th>Status</th>
<th>Date Requested</th>
<th>Date Needed</th>
<th>Priority</th>
<th>Employment Type</th>
<th>Contract Duration</th>
<th>Number of Employees Requested</th>
<th>Number of Candidates</th>
<th>Number of Employees Hired</th>
</tr>
<tbody>
<tr>
<td>WWWWWWWWWW</td>
<td>WWWWWWWWWW</td>
<td>WWWWWWWWWW</td>
<td>WWWWWWWWWW</td>
<td>WWWWWWWWWW</td>
<td>WWWWWWWWWW</td>
<td>WWWWWWWWWW</td>
<td>WWWWWWWWWW</td>
<td>WWWWWWWWWW</td>
<td>WWWWWWWWWW</td>
<td>WWWWWWWWWW</td>
<td>WWWWWWWWWW</td>
<td>WWWWWWWWWW</td>
</tr>
<tr>
<td>WWWWWWWWWW</td>
<td>WWWWWWWWWW</td>
<td>WWWWWWWWWW</td>
<td>WWWWWWWWWW</td>
<td>WWWWWWWWWW</td>
<td>WWWWWWWWWW</td>
<td>WWWWWWWWWW</td>
<td>WWWWWWWWWW</td>
<td>WWWWWWWWWW</td>
<td>WWWWWWWWWW</td>
<td>WWWWWWWWWW</td>
<td>WWWWWWWWWW</td>
<td>WWWWWWWWWW</td>
</tr>
<tr>
<td>WWWWWWWWWW</td>
<td>WWWWWWWWWW</td>
<td>WWWWWWWWWW</td>
<td>WWWWWWWWWW</td>
<td>WWWWWWWWWW</td>
<td>WWWWWWWWWW</td>
<td>WWWWWWWWWW</td>
<td>WWWWWWWWWW</td>
<td>WWWWWWWWWW</td>
<td>WWWWWWWWWW</td>
<td>WWWWWWWWWW</td>
<td>WWWWWWWWWW</td>
<td>WWWWWWWWWW</td>
</tr>
</tbody>
</table>```

Edited by nixx, 13 April 2009 - 09:14 PM.

### #11 groovicus

groovicus

• Security Colleague
• 9,963 posts
• OFFLINE
•
• Gender:Male
• Location:Centerville, SD
• Local time:02:05 PM

Posted 13 April 2009 - 09:23 PM

I understand that you want everything to fit on a screen that has a resolution of 1024 X 768.

What happens if you put this code inside the head tag in your html?

```<style type="text/css">

td{
font-size:9px;
}
}
</style>```

### #12 nixx

nixx
• Topic Starter

• Members
• 159 posts
• OFFLINE
•
• Local time:04:05 AM

Posted 13 April 2009 - 09:40 PM

it fits, but now there's a readability issue. boo. i know you can't always have both

### #13 groovicus

groovicus

• Security Colleague
• 9,963 posts
• OFFLINE
•
• Gender:Male
• Location:Centerville, SD
• Local time:02:05 PM

Posted 13 April 2009 - 10:05 PM

The thing is, some of the columns do not need to contain as much information as others, so you can set the size for individual cells if you want. You can also change the labels a little to help. Instead of Number of Employees Requested, you can use # of Employees Requested. Abbreviate as much as possible so that it is still understandable. You should be able to hit a balance that fits, and is readable.

### #14 nixx

nixx
• Topic Starter

• Members
• 159 posts
• OFFLINE
•
• Local time:04:05 AM

Posted 13 April 2009 - 10:17 PM

hmm yeah okay, I'll try and do that groovicus. Thanks a lot!

### #15 patbox

patbox

• Members
• 456 posts
• OFFLINE
•
• Gender:Male
• Local time:09:05 PM

Posted 13 April 2009 - 10:19 PM

As had been suggested above, you could break up the text this way:

```<style>
table {
table-layout:fixed;
width:100%;
overflow:hidden;
word-wrap:break-word;
}
</style>```

... but is not exactly clear what you wanna do... you need to either decrease the font-size as suggested by groovics or break-words the text, or both. For the titles, if they do not change, break it up with <br> within a cell.
Message from Patbox: I AM LOOKING FOR A GIRLFRIEND (PM if interested) :-)

#### 0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users