I have a two-row table like this:
---------------------------
| 1 Item | Total: $370.00 |
---------------------------
| View Cart Check-out |
---------------------------
I want it to display inline, like this:
| 1 Item | Total: $370.00 | View Cart Check-out |
Is this possible with CSS?
Note: Unfortunately this code is produced by my CMS and it would be difficult to change it to use divs and then CSS float:left or display:inline-block.
Simplified HTML:
<table class="cart-block-summary">
<tbody>
<tr>
<td class="cart-block-summary-items">1 Item</td>
<td class="cart-block-summary-total">Total: $370.00</td>
</tr>
<tr class="cart-block-summary-links">
<td colspan="2">View cart Checkout</td>
</tr>
</tbody>
</table>
Worked for me:
table { width: 600px;}
tr{float:left}
http://jsfiddle.net/N5fhU/
You could also remove the last TR that way it will look all in one line
<table class="cart-block-summary">
<tbody>
<tr>
<td class="cart-block-summary-items">1 Item</td>
<td class="cart-block-summary-total">Total: $370.00</td>
<td class="cart-block-summary-links" colspan="2">View cart Checkout</td>
</tr>
</tbody>
</table>
Related
In my project I have a contacts Table with some information column like below
<table>
<thead>
<tr>
<th>Name</th>
<th>Designation</th>
<th>Organization</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aziz</td>
<td>Executive</td>
<td>BIBT</td>
<td>Dhaka</td>
</tr>
<tr>
<td>Mizan</td>
<td>Manager</td>
<td>BIBT</td>
<td>Dhaka</td>
</tr>
</tbody>
</table>
This form result like below
Name Designation Organization Address
---- ------------ -------------- ----------
Aziz Executive BIBT Dhaka
Mizan Manager BIBT Dhaka
But in my case I need another view for this table for print, that will show the result like below,
| Aziz | | Mizan |
| Executive, BUBT | | Manager, BUBT |
| Dhaka | | Dhaka |
How can I achieve this layout for my table? one thing I am using datatable plugin, and I need this layout only for print purpose. Any help is appreciated.
You can transpose your table using javascript. I am assuming you are using jquery,
First, you need to alter your HTML markup a bit,
You can hide and show elements based on CSS media queries, so, I am adding relevant classes to the span and td.
<table>
<thead>
<tr>
<th>Name</th>
<th>Designation</th>
<th>Organization</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aziz</td>
<td>Executive<span class = 'display-on-print'> ,BIBT</span></td>
<td class = 'hide-on-print'>BIBT</td>
<td>Dhaka</td>
</tr>
<tr>
<td>Mizan</td>
<td>Manager <span display-on-print> ,BIBT</span></td>
<td class = 'hide-on-print'>BIBT </td>
<td>Dhaka</td>
</tr>
</tbody>
</table>
<button>Transpose</button>
Now, you can use jquery to transpose the table,
$("button").click(function(){
$("table").each(function() {
var $this = $(this);
var newrows = [];
$this.find("tr").each(function(){
var i = 0;
$(this).find("td").each(function(){
i++;
if(newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); }
newrows[i].append($(this));
});
});
$this.find("tr").remove();
$.each(newrows, function(){
$this.append(this);
});
});
return false;
});
<table>
<tbody>
<thead>
<tr>
<td>Aziz</td>
<tr>
<td>Executive <span> BIBT </span></td>
</tr>
<tr>
<td>Dhaka</td>
</tr>
</thead>
</tbody>
</table>
I have been racking my brain with this for a while and not a single of the fixes I have come across on SO have helped me, so I am reaching out for some help now.
I have a table that is built up of a collection of row pairs that should be combined in a specific way. Below is the html structure I have been using.
<table border=1>
<tr>
<td rowspawn="2">a</td>
<td rowspawn="2">b</td>
<td rowspawn="2">c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td rowspawn="2">g</td>
<td rowspawn="2">h</td>
</tr>
<tr>
<td colspan="3">def</td>
</tr>
</table>
My understanding is that the cells "d" "e" "f" should have the cell "def" directly under them, however I have the following JSFiddle.
I believe I should see something like this
-------------
| d | e | f |
-------------
| def |
-------------
This doesn't make any sense to me, so any help would be greatly appreciated.
Thanks.
You simply have a mistake in "rowspawn" (it's "rowspan")
<table border=1>
<tr>
<td rowspan="2">a</td>
<td rowspan="2">b</td>
<td rowspan="2">c</td>
<td>d</td>
<td>e</td>
<td>f</td>
<td rowspan="2">g</td>
<td rowspan="2">h</td>
</tr>
<tr>
<td colspan="3">def</td>
</tr>
</table>
Suppose the following basic table structure:
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Is it possible to make it so that the first two data cells and the last two data cells are always 50% of the total width? If one cell gets bigger the other will shrink as much as it can but their total width will be 50% of the whole table. Ex:
|1 |2 |3 |4 |
can adjust to
|1 |2 |3 |4 |
where the start position of 1 and 3 never changes, the end position of 2 and 4 never changes.
EDIT: Ideally without nesting in a second table to house the pair of <td> elements.
A bit hacky - but you may try:
.fifty {
width: 50%
}
<table>
<tr>
<td class="fifty" colspan="2">foo</td>
<td class="fifty" colspan="2">bar</td>
</tr>
<tr>
<td>foo bar</td>
<td>foo foo bar</td>
<td>foo foo</td>
<td>foo bar</td>
</tr>
</table>
I want to make table header and table data. But facing problem with width on that two tables different.
Here is the example table :
<table>
<tr>
<td>Name</td>
<td>Class</td>
<td>Phone</td>
</tr>
</table>
and the data here :
<table>
<tr>
<td>John Reise</td>
<td>Math</td>
<td>123456789</td>
<tr>
<td>Michael Sweirzgez</td>
<td>Information Technology</td>
<td>012345678910</td>
<tr>
So when I try to run the code, it will like this :
Name | Class | Phone
John Reise | Math | 123456789
If I delete the data, width will fit with table header.
I make 2 table, 1 table header and 1 table data cause I want to marquee this data. So table header will keep stay in the top.
Maybe you better use thead and tbody tags?
<table>
<thead>
<tr>
<td>Name</td>
<td>Class</td>
<td>Phone</td>
</tr>
</thead>
<tbody>
<tr>
<td>John Reise</td>
<td>Math</td>
<td>123456789</td>
</tr>
<tr>
<td>Michael Sweirzgez</td>
<td>Information Technology</td>
<td>012345678910</td>
</tr>
</tbody>
</table>
You can read more about it here http://www.w3schools.com/tags/tag_thead.asp
You can use thead and tbody. Here are the simple examples:
http://www.w3schools.com/tags/tag_thead.asp
http://www.idocs.com/tags/tables/_THEAD.html
<html>
<body>
<TABLE border="1" ">
<CAPTION><EM>A test table with merged cells</EM></CAPTION>
<TR><TH rowspan="2"><TH colspan="2"> Average
<TH rowspan="2">Red<BR>eyes </TH>
</TR>
<TR>
<TH>height</TH><TH>weight</TH>
</TR>
<TR>
<TD>1.9<TD>0.003<TD>40%</TD>
</TR>
<TR>
<TD>1.7<TD>0.002<TD>43%</TD>
</TR>
</TABLE>
</body>
</html>
I'm getting the output with first element of header as blank
A test table with merged cells
/-----------------------------------------\
| | Average | Red |
| |-------------------| eyes |
| | height | weight | |
|-----------------------------------------|
| 1.9 | 0.003 | 40% | |
|-----------------------------------------|
| 1.7 | 0.002 | 43% | |
\-----------------------------------------/
Expected output
A test table with merged cells
/----------------------------- \
| Average | Red |
|-------------------| eyes |
| height | weight | |
|------------------------------|
| 1.9 | 0.003 | 40% |
|------------------------------|
| 1.7 | 0.002 | 43% |
\------------------------------/
Remove the extra TH in your code
http://jsfiddle.net/yqQsP/
<html>
<body>
<TABLE border="1" >
<CAPTION><EM>A test table with merged cells</EM></CAPTION>
<TR>
<TH colspan="2"> Average</TH>
<TH rowspan="2">Red<BR>eyes </TH>
</TR>
<TR>
<TH>height</TH><TH>weight</TH>
</TR>
<TR>
<TD>1.9<TD>0.003<TD>40%</TD>
</TR>
<TR>
<TD>1.7<TD>0.002<TD>43%</TD>
</TR>
</TABLE>
</body>
</html>
While nauphal has already addressed your problem, I just wanted to make some suggestions regarding your HTML structure.
First, upper-case isn't mandatory (HTML's case-insensitive), though should you ever switch to XHTML lower-case is mandatory (and, frankly, looks a little nicer too).
Second, because a tbody element is always inserted by the browser (I'm not sure about all clients, but certainly visual web-clients) if there isn't one present already, it's usually best to wrap those elements that represent the 'body' of the table in a tbody yourself, that way you can assign the th element-rows to a thead, which increases semantics a little (I'm not sure how useful that is, but every little helps).
Third, remember to close your tags:
<TR>
<TD>1.9<TD>0.003<TD>40%</TD>
</TR>
Should, really, be:
<TR>
<TD>1.9</TD><TD>0.003</TD><TD>40%</TD>
</TR>
Again, it's not mandatory (in HTML 4, I believe), but it reduces the scope for errors introduced by having extra, un-closed, start-tags around your mark-up.
Fourth, and this is just nit-picking, possibly, if you're wanting to style the whole of the caption as emphasized text it's easier to avoid inserting extra mark-up and just style the caption directly.
That said, here's my version of your table and some CSS:
<table>
<caption>A test table with merged cells</caption>
<theader>
<tr>
<th colspan="2">Average</th>
<th rowspan="2">Red Eyes</th>
</tr>
<tr>
<th>height</th>
<th>weight</th>
</tr>
</theader>
<tbody>
<tr>
<td>1.9</td>
<td>0.003</td>
<td>40%</td>
</tr>
<tr>
<td>1.7</td>
<td>0.002</td>
<td>43%</td>
</tr>
</tbody>
</table>
CSS:
caption {
font-style: italic;
}
td,
th {
border: 1px solid #000;
padding: 0.2em;
}
JS Fiddle.
Change First Row
<TR>
<TH colspan="2"> Average</TH>
<TH rowspan="2">Red<BR>eyes </TH>
</TR>
It will solve the problem