I am kinda beginner and sorry if my question seems too basic.
I have a table that looks like:
--------------------------------------------
|Column 1 |Column 2 |
--------------------------------------------
|this is the text |text |
--------------------------------------------
I wanna make it so:
---------------------------------------------------------------------------------------
|Column 1 |Column 2 |this is the text |text |
---------------------------------------------------------------------------------------
Sample of HTML is:
<html>
<body>
<table width="300px">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td>this is the text</td>
<td>text</td>
</tr>
</table>
</body>
</html>
This is the code you are looking for:
<html>
<body>
<table width="300px">
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>this is the text</td>
<td>text</td>
</tr>
</table>
</body>
</html>
You had two tr tags, that means two rows, and you said you only need one row so I used only one tr tag
make 100% width of table and make tr display as inline
table {
width: 100%
}
tr {
display: inline
}
<html>
<body>
<table width="300px">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td>this is the text</td>
<td>text</td>
</tr>
</table>
</body>
</html>
Try with this CSS
table { table-layout:fixed }
td { overflow:hidden; white-space:nowrap }
The table-layout:fixed rule says "The cell widths of this table depend on what I say, not on the actual content in the cells". This is useful normally because the browser can begin displaying the table after it has received the first <tr>. Otherwise, the browser has to receive the entire table before it can compute the column widths.
If I understood, you want to create a 4 column table.
You declared a 2 column table, (the column is declared with TD)
you have only to declare 4 TD
Try this:
<html>
<body>
<table width="300px">
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>this is the text</td>
<td>text</td>
</tr>
</table>
</body>
</html>
Related
I need to make one row contain 4 cells as follows: the first three cells on one line and the last cell takes its own line under the first three spanning across all of them. Like so:
---------------------------------- <---Start Row
| | | |
| Cell 1 | Cell 2 | Cell 3 |
| | | |
----------------------------------
| |
| Cell 4 |
| |
---------------------------------- <---End Row
Is there a way in HTML to do this?
You're looking for the colspan attribute...
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td colspan="3">Cell 4</td>
</tr>
The colspan will allow you to "span" a single cell over multiple columns. The vertical partner to this attribute is rowspan which will allow you to span a single cell over multiple rows
However, in direct answer to your question, I do not believe it is possible have the 4th cell within a row appear on the next row.
My understanding is that you will have to create 2 separate rows to achieve what you're after. (I will be happy to remove my answer should somebody prove me wrong)
Based on the above, if a jQuery answer is acceptable, you could do the following...
$(function() {
// Get the last child, detach from the row and add colspan
$lastTd = $("table tr td:last-child").detach().attr("colspan", "3");
// Create a new row, add the detached cell, and add to the table
$("table").append($("<tr></tr>").append($lastTd));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</table>
Not sure how clean this might be But My solution is with single tr and 4 td's
td {
border: 1px solid black;
}
tr{
width:120px;
height:50px;
display: table-caption;
}
tr >td{
width:40px;
}
tr > td:nth-child(4)
{
width:120px;
position:absolute;
display:block;
}
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>full width td</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>full width td</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>full width td</td>
</tr>
</tbody>
</table>
I am new to html, is there a way to create columns in plain html, without using CSS, Bootstrap, Jquery or any other frameworks.?
You can use the HTML table element if you do want to use any CSS. See below
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
</tr>
</table>
Source
If you want to define columns by using div's , then you have to use CSS to allot space. If you strictly oppose CSS then as #Raja Khoury said you have to use table.
Or else div along with CSS :
<div id="wrap" style="width:600px; margin:0 auto;">
<div id="left_col" style="float:left; width:300px;">
LEFT
</div>
<div id="right_col" style="float:right; width:300px;">
RIGHT
</div>
</div>
Fiddle : http://fiddle.jshell.net/h8r22mmr/
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
Add more columns .........
</tr>
<tr>
<td>content</td>
<td>content</td>
<td>content</td>
Add more columns .........
</tr>
</table>
In html I'm using a to display a numbers of rows, then between each row is another row containing a single , that in turn contains a with style:none. This row contains additional information for the row above and in the ful code and can be toggled to display or not by clicking on a button on the album row.
The trouble is that even when the div is hidden the row takes up vertical height, I assume this is the height of the , but how can I fix this. Or another thought can I make the hidden or can I only do that for divs.
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td colspan="2">
<div id="1" style="display:none">
</div>
</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
Ive done a:
http://jsfiddle.net/ijabz/zz5zo2jh/
if you remove the hidden rows there is less of a vertical gap between the other rows
apply the style to your table row, not your div:
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr style="display:none">
<td colspan="2">
<div id="1">
</div>
</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
You had to apply style to the tr. Modified your code as follows, now if display is block there is gap and when it is none, no gap:
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr style="display:block;">
<td>
</td>
<td></td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
I'm not sure if i understood you question correctly, so please let me know if not.
If you use Jquery then this would add the display=none to the row with an
$(document).ready(function () {
$('table tr').each(function (i, row) {
console.log(i)//$(row).append("test");
Row = $(row);
if (Row.find("div:hidden").length == 1) {
$(Row).attr("display","none");
}
});
});
Updated your jsfiddle: http://jsfiddle.net/zz5zo2jh/25/
I hope it helps
See this JSFiddle.
Use border-collapse: collapse; on the <table> and padding: 0; on the <tr>.
<tr> elements normally have display: table-row; as default so I wouldn’t change that, because it might lead to some other rendering issues.
<table style="border-collapse:collapse;">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td style="padding:0;" colspan="2">
<div id="d1" style="display:none;margin:1px;"></div>
</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
the margin on the <div> is optional and is only there because the padding has been removed. This way it will look the same if the div is set to display: block;.
I have an html table using colspan=2 to merge cells. I need to make sure merged cells have a given width. However, when two cells are not merged, I need to have their total width not exceed the width of the merged cells. How can I achieve the latter?
In the first table, the text in the merged cells is wrapped, which is fine.
In the second table, the text in the non-merged cells is not wrapped, which makes the table too wide.
I have created a JSFiddle.
My html is:
<table border="1">
<tr>
<td>xyz 1</td>
<td>xyz 2</td>
<td>xyz 3</td>
<td>xyz 4</td>
</tr>
<tr>
<td colspan="2" class="twoColWidth">
xyz aaaa ffffffffffffff
</td>
<td colspan="2" class="twoColWidth">
xyz bbbb fff
</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td>xyz 1 33333 444444</td>
<td>xyz 2</td>
<td>xyz 3</td>
<td>xyz 4 33333 444444</td>
</tr>
<tr>
<td colspan="2" class="twoColWidth">
xyz aaaa ffffffffffffff
</td>
<td colspan="2" class="twoColWidth">
xyz bbbb fff
</td>
</tr>
</table>
and my CSS is:
.twoColWidth {
width: 50px;
}
Give your table a fix width, and use colgroup with col to give all the columns the same width:
<table border="1" style="width: 175px;">
<colgroup>
<col span="4" width="25%" />
</colgroup>
<tr>
<td>xyz 1</td>
<td>xyz 2</td>
<td>xyz 3</td>
<td>xyz 4</td>
</tr>
<tr>
<td colspan="2">
xyz aaaa ffffffffffffff
</td>
<td colspan="2">
xyz bbbb fff
</td>
</tr>
</table>
table { width: 100px; }
just set a max width for the entire table?
If the tables will be always like you stated, you can try e.g. nth-child pseudo-class selector:
tr:nth-child(2) {
width:20px;
}
It will influence always the even/second row in table.
I see there are a couple of posts about this around, including one on SO. However none of them answer the question, I am posting a newer one with an image that demonstrates the problem in 4 browsers.
FireFox renders the background image on the TR as I would like but as you can see none of the others do..
Does anybody have any ideas? At this point it looks like I need to go back to the drawing borad.
ps. adding backgound:none or background-image:none to TD doesn't fix this.
This is the code for my test case:
<!DOCTYPE html>
<head>
<title></title>
<style type="text/css">
body
{
background-color:#aaa;
}
table
{
background-color:#fff;
}
tbody tr
{
height:80px;
background:#aaa url("Content/LM_DROPDOWN_BG_BUTT_01.png") no-repeat bottom ;
position:relative;
}
tbody tr td
{
background-image:none;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th style="width:200">Col1</th>
<th style="width:200">Col2</th>
<th style="width:200">Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Col 1</td>
<td>Row 1 Col 2</td>
<td>Row 1 Col 3</td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td>Row 2 Col 1</td>
<td>Row 2 Col 2</td>
<td>Row 2 Col 3</td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
<tr>
<td>Row 3 Col 1</td>
<td>Row 3 Col 2</td>
<td>Row 3 Col 3</td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
</tbody>
</table>
</body>
</html>
Would nested table work for you?
see the 3rd row
Works cross-browser. Not cute (nested table!), but gets the job done.
Styling <tr>is hum, problematic, especially cross-browser. After all, a tr can only contains td. It's not made to support other stuff (try <table><tr><td>1</td></tr><div>2</div></table> for fun).
Also, give Opera some love.
edit:however, you'll have to either have the same (fixed) width for the nested <td> (or the content), otherwise, the width of the <td> will be broken (not the same).