i want to decrease the width of columns in below table.
<table cellspacing="0"cellpadding="0">
<tr><td><h3>Allow Points+Cash </h3></td></tr>
<tr><td><br>MIN CASH REQUIRED</td></tr>
<tr>
<td><br><input type="number" style="width:150px" > Or</td>
<td><br><input type="number" style="width:150px" > % Of Award Value</td>
</tr>
<tr><td><h3>Point to Cash Conversion </h3></td></tr>
<tr><td><br>CURRENCY</td>
<td><br>CONVERSION</td>
</tr>
</table>
try this:
<table cellspacing="0" cellpadding="0">
</table>
<style>
*{ margin:0; padding:0;}
</style>
You can remove all the margin and padding using the mentioned code in stylesheet.
Perhaps you're wanting to collapse the borders? http://www.w3schools.com/cssref/pr_border-collapse.asp
table {
border-collapse: collapse;
}
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.
Table with only one border line, in this case i have two borders...
<table width="100%" border="1">
<tr>
<td width="12%"> </td>
<td width="88%"> </td>
</tr>
</table>
Thanks
Add the border-collapse CSS rule:
table {
border-collapse:collapse;
}
jsFiddle example
CSS:
table {border-collapse:collapse;}
You should really use css for styling where possible. A great article about it is here http://www.w3schools.com/css/css_table.asp
Try adding this to you css
table
{
border-collapse:collapse;
}
An example is here http://jsfiddle.net/cxmBW/1
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 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
I can't get colspan to work when I use a fixed width (IE 7)? Why?!
Sample Code:
<html>
<head>
<style>
.inputGroup td
{ width:250px; }
</style>
</head>
<body>
<table class="inputGroup">
<tr>
<td>cell1</td>
<td>cell2</td>
</tr>
<tr>
<td colspan="2">This should span two columns but it doesnt</td>
</tr>
<tr>
<td>cell1</td>
<td>cell2</td>
</tr>
</table>
</body>
</html>
Help anybody? :(
it does, but you've limited the width. If you want, try creating another class called '.doubleSpanInputGroup' or something with width 500 and set that class onto the spanning column.
eg.
<html>
<head>
<style>
.inputGroup td
{ width:250px; }
.inputGroup td.doubleInputGroup
{ width:500px; }
</style>
</head>
<body>
<table class="inputGroup">
<tr>
<td>cell1</td>
<td>cell2</td>
</tr>
<tr>
<td colspan="2" class="doubleInputGroup">This should span two columns but it doesnt</td>
</tr>
<tr>
<td>cell1</td>
<td>cell2</td>
</tr>
</table>
</body>
</html>
EDIT: made the new style more hierarchical
Try making the rule apply to tr instead of td and make the width 500px instead, as such:
.inputGroup tr { width: 500px; }
The problem you're having is because you've set a limit on the td to be at most 250px wide, so the browser is simply following your instructions.
in general manner :
table tr:first-child td:first-child{ width:86px; }
if this is the only width all first column take this width and colspan in ie7 will work
I tried to set the width of the colspan cells to auto, seemed to work fine in IE7/8/9
.yourColSpanTD { width: auto !important; }