Make Cell Not Resizable

V

vunet.us

Hello,
My table's cell has a 100px width. But when I shrink window, the cell
size gets smaller and smaller. How can I avoid this? The code is
below. Thanks you all.

<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>Simple example</title>

<style type="text/css">
table.sample {
border-width: 0px;
border-spacing: 0px;
border-collapse: collapse;
}
table.sample td {
width:100px;
border-width: 1px;
padding: 1px;
border-style: inset;
border-color: gray;
background-color: white;
}
</style>

</head>
<body>
<table class="sample"><tr>
<td>Content</td><td>Content</td><td>Content</td><td>Content</
td><td>Content</td><td>Content</td><td>Content</td>
</tr></table>
</body>
</html>
 
B

Ben C

Hello,
My table's cell has a 100px width. But when I shrink window, the cell
size gets smaller and smaller. How can I avoid this? The code is
below. Thanks you all.
Click to expand...

Set a width on the whole table instead (about 700px in this case), and
not on the <td>s.
 
V

vunet.us

Set a width on the whole table instead (about 700px in this case), and
not on the <td>s.
Click to expand...

if i cannot do it, are there any other options? my fix was inserting
preset width wiv inside of the cell. thanks.
 
J

Jonathan N. Little

if i cannot do it, are there any other options? my fix was inserting
preset width wiv inside of the cell. thanks.
Click to expand...
Unfortunately the reason for your trouble is that the table cells are
behaving like 'table-cell's! They are suppose to do that. Maybe you are
choosing the wrong element? How about a URL?
 
D

dorayme

Hello,
My table's cell has a 100px width. But when I shrink window, the cell
size gets smaller and smaller. How can I avoid this? The code is
below. Thanks you all.

<html>
Click to expand...


You can count the cells across and multiply the number by the
width of each cell, add some px for the borders and let this
guide a min-width setting for a wrapper:

..wrapper {min-width: 780px;}

and in the html

<div>

your table code (which has a white space error in it btw)

</div>

will do the trick in decent browsers.

You can avoid this construction altogether as well. It is almost
invariably better to let the magic of tables do its work, ie. the
cells to be determined by the content... fluidity and
intuitively happy wrapping.
 
V

vunet.us

Unfortunately the reason for your trouble is that the table cells are
behaving like 'table-cell's! They are suppose to do that. Maybe you are
choosing the wrong element? How about a URL?
Click to expand...

i thought so. i already inserted some other fixed width elements
inside of the cell to fix my problem. my table itself can have
different amount of cells, so i could not set a fixed width to table
element itself.
thank you for explanation.
 
B

Ben C

if i cannot do it, are there any other options? my fix was inserting
preset width wiv inside of the cell. thanks.
Click to expand...

That sounds just as good or better (because as you say you don't have to
know how many cells there are).

I don't know of any other way, you could experiment perhaps with
table-layout: fixed.
 
B

BootNic

news: (e-mail address removed)
Hello,
My table's cell has a 100px width. But when I shrink window, the cell
size gets smaller and smaller. How can I avoid this? The code is
below. Thanks you all.
Click to expand...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>Simple example</title>

<style type="text/css">
table.sample {
border-width: 0px;
border-spacing: 0px;
border-collapse: collapse; table-layout:fixed;
}
table.sample td {
width:100px;
border-width: 1px;
padding: 1px;
border-style: inset;
border-color: gray;
background-color: white;
}
Click to expand...
table.sample td:before {
content: '';
display: block;
height: 0;
margin: 0;
padding: 0;
width: 100px;
}
</style>

</head>
<body>
<table class="sample">
Click to expand...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Having trouble centering contents of td ? 3
Javascript DOM 1
How to wrap <td> content . 16
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Image shifts to the right when export the page to pdf 4
Sort by number of characters 1
How to have two html audio players on one page? 0

Members online

Total: 49 (members: 2, guests: 47)
Robots: 192

Forum statistics

Threads
473,764
Messages
2,569,564
Members
45,041
Latest member
RomeoFarnh

Latest Threads

Top