I managed to kinda achieve my intended design but it feels kinda like a hack.
So I'm working with this table and now cell size looks exactly as I'd like it to be, but I have to add extra row on top of my table (and hide it, but not in example so it's easier to understand). So if you try and delete that top row you can see how it all gets messed up (description fields don't look the same).
http://jsfiddle.net/nooorz24/cea57mhd/4/
table {
width: 100%;
}
table td {
border: 1px solid black;
}
<table>
<tr>
<td style="width: 1px;"></td>
<td style="width: 10000px;"></td>
<td style="width: 1px;"></td>
<td style="width: 10000px;"></td>
</tr>
<tr>
<td style="width: 1px;">IMG</td>
<td style="width: 10000px;" colspan="2">Description text</td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<td style="width: 1px;">IMG</td>
<td style="width: 10000px;">Description text</td>
</tr>
</table>
As far as I can understand it's because I try to set width to a cell that has colspan="2" and html doesn't understand how to work with that.
Can this be solved without adding extra row?
You can use the HTML col element which is designed just for that: styling or defining common attributes for an entire column.
table {
width: 100%;
}
table td {
border: 1px solid black;
}
<table>
<colgroup>
<col style="width: 1px">
<col style="width: 10000px;">
<col style="width: 1px">
<col style="width: 10000px;">
</colgroup>
<tr>
<td>IMG</td>
<td colspan="2">Description text</td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<td>IMG</td>
<td>Description text</td>
</tr>
</table>
Related
I am trying to create a table where both rows are three cells. I want the first row to be 3 equal width cells, while the second row has 2 equal width cells (each 1/4 of the first row's cells) and a third cell that fills up the rest of the row.
Here is a picture of what I have now
I want to merge 3+4 in the top table, but when I actually merge them I get the second table.
Here is a fiddle that I have:
http://jsfiddle.net/9n3oyf2w/
<!-- This works: -->
<tr>
<td colspan="4">a</td>
<td colspan="2">b</td>
<td colspan="2">c</td>
</tr>
<tr>
<td colspan="1">1</td>
<td colspan="1">2</td>
<td colspan="1">3</td>
<td colspan="5">4</td>
</tr>
<!-- This doesn't work: -->
<tr>
<td colspan="4">a</td>
<td colspan="2">b</td>
<td colspan="2">c</td>
</tr>
<tr>
<td colspan="1">1</td>
<td colspan="1">2</td>
<td colspan="6">3+4</td>
</tr>
I have no clue what I am doing wrong but it has been driving me crazy. I've tried other combinations of colspans and some of them work while others don't.
EDIT:
New pic for what I am trying to achieve:
link
So you want something like this?
table, th, td{
padding: 0;
margin: 0;
border-collapse: collapse;
border:0;
border-spacing:0;
margin-left: auto;
margin-right: auto;
}
table.topInnerTable, table.topInnerTable td{
border: 1px solid black;
border-bottom: 0;
}
table.bottomInnerTable, table.bottomInnerTable td{
border: 1px solid black;
}
<table width="960px">
<tr>
<td>
<table class="topInnerTable" width="100%">
<colgroup>
<col width="320px">
<col width="320px">
<col width="320px">
</colgroup>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="bottomInnerTable">
<tr>
<td width="80px">1</td>
<td width="80px">1</td>
<td width="800px">10</td>
</tr>
</table>
</td>
</tr>
</table>
I believe this is what you want
<table width="100%">
<tr>
<td colspan="3" width="33%">a</td>
<td width="33%">b</td>
<td width="33%">c</td>
</tr>
<tr>
<td width="10%">1</td>
<td width="10%">2</td>
<td colspan="3" width="80%">3+4</td>
</tr>
</table>
I have a table with a lot of records and a search box
<table>
<tr>
<td class="col-3">name1</td>
<td class="col-3">sName1</td>
<td class="col-3">age1</td>
</tr>
<tr>
<td class="col-3">name..</td>
<td class="col-3">sName..</td>
<td class="col-3">age..</td>
</tr>
<tr>
<td class="col-3">nameN</td>
<td class="col-3">sNameN</td>
<td class="col-3">ageN</td>
</tr>
</table>
.col-3{
width:33,33%
}
Some of the records may be displayed as none, so if the search box returns a full "none" column it gets wraped to none as if it didnt have the "witdh:33,33%" atribute.
Anyone knows a way to keep the elements in his original size even if they dont have content?
Thanks in advance.
Try table-layout: fixed along with a fixed width for the table
table {
width: 100%;
table-layout: fixed;
}
.col-3 {
width: 33, 33%;
border: 1px solid grey;
}
<table>
<tr>
<td class="col-3">name1 askdlhaslkdhsaldsad asjd;kadaj as;dj;asjd as ;asjsd;asjd;ja</td>
<td class="col-3">sName1</td>
<td class="col-3">age1</td>
</tr>
<tr>
<td class="col-3">name..</td>
<td class="col-3">sName..</td>
<td class="col-3">age..</td>
</tr>
<tr>
<td class="col-3">nameN</td>
<td class="col-3">sNameN</td>
<td class="col-3">ageN</td>
</tr>
</table>
try this one:
<table style="border:1px solid">
<tr>
<td style="min-width:50px">one</td>
<td style="min-width:100px">two</td>
</tr>
</table>
please help me with this:
the whole code is given below:
HTML
<div id="user_list">
<table id="grd" style="width: 100%;">
<thead>
<tr>
<td style="width: 15%;">Name</td>
<td style="width: 15%;">Age</td>
<td style="width: 35%;">Address</td>
<td style="width: 35%;">Office Address</td>
</tr>
</thead>
<tbody>
<tr>
<td>Agnib</td>
<td>25</td>
<td>jhjhhsdj</td>
<td>wyeruyweryuwe</td>
<tr>
</tbody>
</table>
</div>
Everything is fine till here. But, once I apply the below css, the width of the columns is getting messed up.
CSS
#grd thead, #grd tbody
{
display: block;
width: 100%;
}
Why the width is getting messed up and its becoming smaller in size. I have attached a sample image. Its happening exactly like the below:
#grd thead, #grd tbody
{
width: 100%;
}
<div id="user_list">
<table id="grd" style="width: 100%;">
<thead>
<tr>
<td style="width: 15%;">Name</td>
<td style="width: 15%;">Age</td>
<td style="width: 35%;">Address</td>
<td style="width: 35%;">Office Address</td>
</tr>
</thead>
<tbody>
<tr>
<td>Agnib</td>
<td>25</td>
<td>jhjhhsdj</td>
<td>wyeruyweryuwe</td>
<tr>
</tbody>
</table>
</div>
or
#grd thead, #grd tbody
{
width: 100%;
}
table
{
border:1px solid gray;
}
table tr td
{
border:1px solid gray;
}
DEMO FIDDLE
DEMO UPDATED
In css file just apply styles to complete table that is "#grd", no need to apply for individual elements like "#grd thead" and "#grd tbody".
Try this code once:
<table id="grd" style="width: 100%;" border=1>
<thead>
<tr><td></td>
<td style="width: 15%">Name</td>
<td style="width: 15%">Age</td>
<td style="width: 35%">Address</td>
<td style="width: 35%">Office Address</td>
</tr>
</thead>
<tbody>
<tr><td></td>
<td style="width: 15%">Agnib</td>
<td style="width: 15%">25</td>
<td style="width: 35%">jhjhhsdj</td>
<td style="width: 35%">wyeruyweryuwe</td>
<tr>
<tr><td></td>
<td style="width: 15%">Agnib</td>
<td style="width: 15%">25</td>
<td style="width: 35%">jhjhhsdj</td>
<td style="width: 35%">wyeruyweryuwe</td>
<tr>
</tbody>
</table>
I've got a table with two rows. The first row just has three cells. The second row has two cells, with the first cell containing another table that needs to fill the whole cell.
<table border="1" style="border-collapse:collapse;">
<tr>
<td style="WIDTH: 205px;">1</td> <!--This width doesn't apply in Chrome-->
<td style="width:100%;">2</td>
<td style="WIDTH: 5px;">3</td>
</tr>
<tr>
<td colspan="2">
<TABLE width="100%" border="1" style="border-collapse:collapse;table-layout: fixed;">
<TR>
<TD style="width:130px;">
A</TD>
<TD style="width:90px;">
B</TD>
<TD style="width:230px;">
C</TD>
</TR>
</TABLE>
</td>
<td>
D
</td>
</tr>
</table>
Simple enough, really....or so I thought.
It appears as I would expect in IE. But Chrome seems to not apply the width of the first cell correctly. It seems to be affected by the table in the cell below.
Why is this happening, and how can I get around this?
Two things you should do:
On the table element, use table-layout: fixed;
Insert columns and give them a width
(You could also assign width to table headers/cells of the first row)
Like this:
<table border="1" style="table-layout: fixed; width: 100%;">
<colgroup>
<col style="width: 205px;">
<col style="width: auto;">
<!-- Use "width: auto;" to apply the remaining (unused) space -->
<col style="width: 5px">
</colgroup>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<!-- Etc. -->
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
table cell width issue
I have a table set up as
<html>
<body bgcolor="#14B3D9">
<table width="100%" border="1" bgcolor="#ffffff">
<tr>
<td width="25%">25</td>
<td width="50%">50</td>
<td width="25%">25</td>
</tr>
<tr>
<td width="50%">50</td>
<td width="30%">30</td>
<td width="20%">20</td>
</tr>
</table>
</body>
</html>
How do i get the 2 rows to have different cell width?
One solution would be to divide your table into 20 columns of 5% width each, then use colspan on each real column to get the desired width, like this:
<html>
<body bgcolor="#14B3D9">
<table width="100%" border="1" bgcolor="#ffffff">
<colgroup>
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
<col width="5%"><col width="5%">
</colgroup>
<tr>
<td colspan=5>25</td>
<td colspan=10>50</td>
<td colspan=5>25</td>
</tr>
<tr>
<td colspan=10>50</td>
<td colspan=6>30</td>
<td colspan=4>20</td>
</tr>
</table>
</body>
</html>
JSFIDDLE
As far as i know that is impossible and that makes sense since what you are trying to do is against the idea of tabular data presentation. You could however put the data in multiple tables and remove any padding and margins in between them to achieve the same result, at least visibly. Something along the lines of:
<html>
<head>
<style type="text/css">
.mytable {
border-collapse: collapse;
width: 100%;
background-color: white;
}
.mytable-head {
border: 1px solid black;
margin-bottom: 0;
padding-bottom: 0;
}
.mytable-head td {
border: 1px solid black;
}
.mytable-body {
border: 1px solid black;
border-top: 0;
margin-top: 0;
padding-top: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.mytable-body td {
border: 1px solid black;
border-top: 0;
}
.mytable-footer {
border: 1px solid black;
border-top: 0;
margin-top: 0;
padding-top: 0;
}
.mytable-footer td {
border: 1px solid black;
border-top: 0;
}
</style>
</head>
<body>
<table class="mytable mytable-head">
<tr>
<td width="25%">25</td>
<td width="50%">50</td>
<td width="25%">25</td>
</tr>
</table>
<table class="mytable mytable-body">
<tr>
<td width="50%">50</td>
<td width="30%">30</td>
<td width="20%">20</td>
</tr>
</table>
<table class="mytable mytable-body">
<tr>
<td width="16%">16</td>
<td width="68%">68</td>
<td width="16%">16</td>
</tr>
</table>
<table class="mytable mytable-footer">
<tr>
<td width="20%">20</td>
<td width="30%">30</td>
<td width="50%">50</td>
</tr>
</table>
</body>
</html>
JSFIDDLE
I don't know your requirements but i'm sure there's a more elegant solution.
You can't have cells of arbitrarily different widths, this is generally a standard behaviour of tables from any space, e.g. Excel, otherwise it's no longer a table but just a list of text.
You can however have cells span multiple columns, such as:
<table>
<tr>
<td>25</td>
<td>50</td>
<td>25</td>
</tr>
<tr>
<td colspan="2">75</td>
<td>20</td>
</tr>
</table>
As an aside, you should avoid using style attributes like border and bgcolor and prefer CSS for those.
with 5 columns and colspan, this is possible (click here) (but doesn't make much sense to me):
<table width="100%" border="1" bgcolor="#ffffff">
<colgroup>
<col width="25%">
<col width="25%">
<col width="25%">
<col width="5%">
<col width="20%">
</colgroup>
<tr>
<td>25</td>
<td colspan="2">50</td>
<td colspan="2">25</td>
</tr>
<tr>
<td colspan="2">50</td>
<td colspan="2">30</td>
<td>20</td>
</tr>
</table>