I have a table which has spanned rows. When I create an h ref the link is only clickable on the one line I would like to have the link clickable anywhere on that cell.
I've tried the following:
<table>
<tr><td rowspan=2><a style='display:block; width:100%; height:100%;' href='#'</td><td>Cell 2</td><td>Cell 3</td></tr>
<tr><td>Cell 4</td><td>Cell 5</td></tr>
</table>
<table>
<tr><td rowspan=2><a style='display:inline-block; width:100%; height:100%;' href='#'</td><td>Cell 2</td><td>Cell 3</td></tr>
<tr><td>Cell 4</td><td>Cell 5</td></tr>
</table>
Is there a way of getting the link to span both rows?
your html syntax seems incorrect as your tag isn't properly ended. You could try this:
<table>
<tr>
<td rowspan="2">
<a style="display:block; width:100%; height:100%;" href="#">Text in your big cell 1</a>
</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</table>
As you can see, you will better see such problems with nicer indentation ;-)
Related
.one {
background-color:green;
}
<tr>
<div class="one">
<td>td 1</td>
<td>td 2</td>
</div>
<td>td 3</td>
</tr>
this css command is not working, i want to turn two of the "td" cells into green but it is not happening tell me where i am going wrong. when I write "td" or "tr" instead of one(class name) then it is working properly but not with this class.
You should add class "one" to td directly, for your question div is not necessary element.
<tr>
<td class="one">td 1</td>
<td class="one">td 2</td>
<td>td 3</td>
</tr>
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 this HTML Table with headings:
<table width="100%" align="center" rules="cols" frame="box" cellpadding="5" cellspacing="5">
<tr>
<td width="" align="center"><strong><img src="/includes/images/padlock_closed.png" width="14px" /></strong></td>
<td width="20px"><strong><input type="text" class="search" name="ticketnumber" placeholder="Ticket #" size="6" onkeyup="showUser(this.value)" /></strong></td>
<td width="50px"><strong>Contact</strong></td>
<td width="200px"><strong>Summary</strong></td>
<td width="40px"><strong>Category</strong></td>
<td width="30px"><strong>Open Date</strong></td>
<td width="30px"><strong>Last Modified</strong></td>
<td width="30px"><strong>Assigned To</strong></td>
</tr>
I am creating a live PHP/MySQL Search script and i need a div to show the results but i want to show them below these headings
I tried adding:
<div id="result">
'rest of HTML Table here...'
</div>
</table>
but it doesn't display the table correctly/in the correct format
how can i make it display correctly with a div in it?
You shouldn't be using a <div>, you should have a header row that uses <th> tags (instead of using <td>'s as you currently have and then data rows that use <td> tags inside of a <tr> for each row.
Update: Example with <tbody>:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tbody>
<tr>
<td>Row 1 column 1 data</td>
<td>Row 1 column 2 data</td>
</tr>
<tr>
<td>Row 2 column 1 data</td>
<td>Row 2 column 2 data</td>
</tr>
</tbody>
</table>
You can then write css for the <tbody> tag:
tbody { color: blue; }
How to set position inside a table? I have table inside which I have span and certain links. I made <td> as center alignment and span texts starting from center, but when I do the same for all links <td> everything is displayed in center if it own. But I need to start all text at the same position. How to do this?
What i understand is that you want to align the text.
Try this way, also try to be more exact and send us a copy of your code.
But from what i understood try out this.
div style="text-align: center;">
<table style="margin: 0px auto;" border="0">
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>