I have an HTML table with 3 columns and amount of text in each column is variable. I would like to set some rules on the layout of the table but Im not sure how to do that in CSS.
Title | Author | Publisher
The default ratio is 50%, 25%, 25% for each column. The goal is to keep everything on a single line if possible. The author and publisher columns have a higher priority to be single lined that the title column.
UPDATE: The problem is when the amount of text exceeds the width of a single line.
You need to change the percentages to defined widths(px). Define the width of the table, as well as give each <TD> it's own width definition that together equal the width of the table. Best way would be to create a CSS class for both, and just assign the class to each element. Something like this, very general obviously.
.table{
width:500px;
}
.tablecell_1{
width:200px;
}
.tablecell_2{
width:200px;
}
.tablecell_3{
width:100px;
}
<table class="table">
<tr>
<td class="tablecell_1">
</td>
<td class="tablecell_2">
</td>
<td class="tablecell_3">
</td>
</tr>
</table>
You can create a class for each of the columns.
<th class="title">Title</th>
<th class="author">Author</th>
<th class="publisher">Publisher</th>
And make css specific for each one.
.title{
}
.author{
}
.publisher{
}
Define a width for the table and then add a class on <td> tags with `width:auto;
.table{
width:900px;
}
.cell{
width:auto;
}
And here your table
<table class="table">
<tr>
<td class="cell">
</td>
<td class="cell">
</td>
<td class="cell">
</td>
</tr>
</table>
Let me now if this is what you wish
Related
I have 3 tables that I use. I want :
one on the page left
one on the page in the center and
one on the right
All on the same height
The tables can expand and when I use float the expanding goes over the content under it due to the float and I dont want that.
Table code is:
<table id="budget">
<tr>
<th>Project name</th>
<th>Deadline</th>
<th></th>
</tr>
<tr>
<td>Project 1</td>
<td>24/1/2014</td>
<td><div class="arrow"></div></td>
</tr>
<tr><ul>
<td colspan="5">
<li> Your total hours: 3:00</li>
<li>Budget left: €100</li>
</ul>
</td>
</tr>
</table>
OR is there maybe a better way to place these tables? I am open for new suggestions.
A 3 column layout
HTML
<div id="container">
<div class='left third'>
<table>
</table>
</div>
<div class='centre third'>
<table>
</table>
</div>
<div class='right third'>
<table>
</table>
</div>
</div>
CSS
div.third{
width:33%;
}
div.left{
float:left;
}
div.right{
float:right;
}
div.centre{
float:right;
}
/* This will centre the middle table */
div.centre table{
width:#####px
margin: 0 auto;
}
Notes:
1) Width is 33%, not 33.3% to prevent come browsers from wrapping the right column.
2) DO NOT set margins for the columns
3) If possible, use a standard library such as Bootstrap
you can just use margins in css such as:
margin-left:.....
margin-right:....
margin-top:.....
margin-bottom:....
to do it this way you may have to give your td's and th's different id's so you can control them separately
I think you are saying you need three rows/columns in one table whose content is bound to expand.
In header append the stylesheet using
<link rel="stylesheet" href="q1.css" type="text/css">
CODE
<table >
<tr >
<th >Project name</th>
<th>Deadline</th>
<th></th>
</tr>
<tr >
<td>Project 1</td>
<td>24/1/2014</td>
<td><div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div></td>
</tr>
<tr>
<td colspan="5">
<ul>
<li> Your total hours: 3:00</li>
<li>Budget left: €100</li>
</ul>
</td>
</tr>
</table>
css code
table,th,td
{
border : 1px solid black;
border-collapse : collapse;
}
td{
width:10px;
height:10px;
overflow:auto;
}
div.scroll
{
background-color:#00FFFF;
width:100px;
height:100px;
overflow:scroll;
}
If the table is overlapping other contents in the page then you could you css
clear:both;
The clear property specifies which sides of an element other floating elements are not allowed.
I'm having a bit of an issue getting some stylesheet behavior that I want. I'm not even sure if it's possible. Basically I'm attempting to place a table with a variable number of cells with static cell width in a DIV with overflow: auto, and my goal is that when the tables width extends past the width of the container DIV that it becomes scrollable.
This isn't the case. The cells get shrunk together. A very basic representation (with inline styles for ease on this; not actually in the application haha) of the code:
<div style="width: 1000px; overflow-x: auto;">
<table>
<tr>
<td style="width:400px;">
This
</td>
<td style="width:400px;">
Should
</td>
<td style="width:400px;">
Scroll!
</td>
</tr>
</table>
</div>
Is there anyway I can do this with CSS, or am I going to have to go back to setting the width inline on a second div containing the table through calculations?
Works if you set the width on the table itself.
<table style="width:1200px;">
The td will always shrink to the necessary size, they won't push the table wider in that situation.
using CSS can done like below but make sure you use id or class for applying css if you have more then one table or div.
<style>
div { width: 400px; overflow-x: auto; }
table { width:1200px; }
table td { width:400px; }
</style>
<div>
<table>
<tr>
<td>
This
</td>
<td>
Should
</td>
<td>
Scroll!
</td>
</tr>
</table>
</div>
This should help
<table style="width: max-content;">
How do you make individual table columns fixed for a certain width so no matter how much text is in that column, the width of the column stays the same?
<col> tag is only good for firefox
table-layout:fixed is for whole table really
Just setting a width does not do it
what is the best css property to use for this
Below is code:
.video{
overflow:hidden;
table-layout:fixed;
max-width:146px;
}
.audio{
overflow:hidden;
table-layout:fixed;
max-width:146px;
}
.image{
overflow:hidden;
table-layout:fixed;
max-width:146px;
}
.qid2{
overflow:hidden;
table-layout:fixed;
max-width:92px;
}
<table border=1 id="vidtbl">
<tr>
<th>Question No</th>
<th>Video</th>
<th>Audio</th>
<th>Image</th>
</tr>
<tr>
<td class="qid2"></td>
<td class="video">images/dolphinvideo.png//////////////////////////////////////</td>
<td class="audio">hello</td>
<td class="image"></td>
</tr>
</table>
You can wrap the contents of the <td> in another tag with width and overflow:hidden. For example:
<table>
<tr>
<td class="fifty">
<p>Lorem ipsum dolor</p>
</td>
</td>
</table>
And the CSS:
.fifty p { overflow:hidden; width:50px; }
You can use width attribute in td tag
<td width="100px">
or you can use style attribute
<td style="width:100px">
or you can define it in css file
.tdstyle{
width:100px;
}
and specify the class in td tag
<td class="tdstyle">
If setting td's width to a fix value does not work for you:
<td width="100">..</td> or <td style="width:100px">...</td>
Wrapped the content to a div and set the overflow as hidden:
<td><div style="width:100px;overflow:hidden;">...</div></td>
Css class will be much efficient and easy to maintain though:
.col120 { width:120px; overflow:hidden;}
<td><div class="col120">content...</div></td>
try using
max-width:100px;
or
max-height:100px;
This will let your column expand maximum upto the width you set.
I have a to-columns table in a div :
<div>
<table>
<tbody>
<tr>
<td class="action" >
<a> ✔ </a>
</td>
<td class="content">
<p>Bigger text...(variable size).......</p>
</td>
</tr>
<tr>
<td class="action" >
<a> ✔ </a><a> ✘ </a>
</td>
<td class="content">
<p>Bigger text...(variable size).......</p>
</td>
</tr>
... same structure in all the table
</tbody>
</table>
</div>
And I would like the "action" column to fit the content, and the "content" column to take the rest of available space. The "action" column would look better with a right align.
The table should also fit 100% of the container's width.
Is there a way of doing this without fixing the columns width ?
I tried with this:
table .action
{
width:auto;
text-align:right;
}
table
{
border-collapse:collapse;
border-spacing:0;
width:100%;
}
But the left column takes half of the table...
Giving the content td a 100% width will force it to take as much space as it can, so .content{ width: 100% } should work.
Also give the .action a white-space: nowrap to make sure the x and the checkmark stay next to each other. Otherwise the content will be able to take even more space and force the icons below each other.
table .action
{
width:auto;
text-align:right;
white-space: nowrap
}
table .content {
width: 100%
}
table
{
border-collapse:collapse;
border-spacing:0;
width:100%;
border: 1px solid
}
<table>
<tbody>
<tr>
<td class="action" >
<a> ✔ </a>
</td>
<td class="content">
<p>Bigger text...(variable size).......</p>
</td>
</tr>
<tr>
<td class="action" >
<a> ✔ </a><a> ✘ </a>
</td>
<td class="content">
<p>Bigger text...(variable size).......</p>
</td>
</tr>
</tbody>
</table>
Set the column width: 1px and white-space: nowrap.
This will try to make it 1px, but the nowrap will stop it from getting smaller than the widest element in that column.
I found this answer when trying to make one column of many as small as possible.
Giving the content td a 1% width will force it to take as little space as it can, so .content{ width: 1% } worked for me.
The bootstrapian way of doing this:
<div class="row">
<div class="col-sm-1"> content... </div>
<div class="col"> content... </div>
</div>
Basically you need to try out different things keeping in mind the following:
col-sm Small column
col-sm-1 Smallest column
col-sm-2 Slightly bigger than smallest column (Numbers go from 1 to 12)
col-md Medium sized columns (same numbering rule)
col-lg Large sized columns (same numbering rule)
I have to dynamically create a table with a variable number of columns, determined at runtime.
Can somebody tell me if it's possible to have a html table with equal size columns that are fully stretched?
If you don't know how many columns you are going to have, the declaration
table-layout: fixed
along with not setting any column widths,
would imply that browsers divide the total width evenly - no matter what.
That can also be the problem with this approach, if you use this, you should also consider how overflow is to be handled.
<table width="400px">
<tr>
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
</tr>
</table>
For variable number of columns use %
<table width="100%">
<tr>
<td width="(100/x)%"></td>
</tr>
</table>
where 'x' is number of columns
ALL YOU HAVE TO DO:
HTML:
<table id="my-table"><tr>
<td> CELL 1 With a lot of text in it</td>
<td> CELL 2 </td>
<td> CELL 3 </td>
<td> CELL 4 With a lot of text in it </td>
<td> CELL 5 </td>
</tr></table>
CSS:
#my-table{width:100%;} /*or whatever width you want*/
#my-table td{width:2000px;} /*something big*/
if you have th you need to set it too like this:
#my-table th{width:2000px;}
Just add style="table-layout: fixed ; width: 100%;" inside <table> tag and also if you do not specify any styles and add just style=" width: 100%;" inside <table> You will be able to resolve it.
table {
width: 100%;
th, td {
width: 1%;
}
}
SCSS syntax