I have a html table with several columns. In case the table does not fit in the page horizontally, I would like all but one column to collapse (instead of a horizontal scrollbar to appear on the page).
By collapse I mean: hiding the part of the content that does not not fit inside the cell.
How can I do that?
html:
<table>
<tr>
<td>this can collapse</td>
<td>this can collapse</td>
<td class="nocollapse">this should not collapse</td>
<td>this can collapse</td>
</tr>
</table>
css:
table {
width: 100%;
max-width:100%;
}
td {
border: 1px solid black;
white-space: nowrap;
overflow: hidden;
}
td.nocollapse {
overflow: none;
}
The button just shows the effect of a script that would collapse the columns. Use the code of the button's onclick function for if the screen width is too small.
<!DOCTYPE html>
<html>
<head>
<style>
tr, td {border:solid 1px black;padding:3px;}
</style>
</head>
<body>
<table>
<tr>
<td class="collapse">this can collapse</td>
<td class="collapse">this can collapse</td>
<td>this should not collapse</td>
<td class="collapse">this can collapse</td>
</tr>
</table>
<button onclick="for (var el of document.querySelectorAll('td.collapse'))el.style.display='none';">Collapse</button>
</body>
</html>
If you use jQuery, this becomes even easier with the button looking like: <button onclick="$('td.collapse').hide();">Collapse</button>
Related
I have
<table>
<tr>
<td style='text-align:center'>
CENTERED
</td>
</tr>
</table>
I would like to ADD a single character either on the left or on the right of CENTERED, without affecting the x-position of the CENTERED string.
To be clear: NOT on the left of the cell, but on the left of the CENTERED string. And the CENTERED string can be anything, so I do not want to calculate something pixel-perfect and move it by some constant pixel value.
I tried fiddling with position:absolute/relative and padding-left/left but I couldn't find a working solution.
Ideally if it could be build with classes:
<table>
<tr>
<td style='text-align:center'>
<span class='centeredRegardless'>CENTERED</span>
<span class='onTheLeftWithoutAffectingThePreviousOne'>*</span>
</td>
</tr>
</table>
Then I will need those classes defined :)
Thank you
If you want some cells to have the extra character and some not you could put the extra character as content in a pseudo element positioned absolutely so it doesn't change the positioning of the actual text at all.
For a left character position is right: 100% and for a character on the right the positioning is left: 100%.
td {
position: relative;
}
td.extraChar::before {
content: '*';
position: absolute;
right: 100%;
}
<table>
<tr>
<td style='text-align:center' class="extraChar">
<span class='centeredRegardless'>CENTERED</span>
</td>
</tr>
<tr>
<td style='text-align:center'>
<span class='centeredRegardless'>CENTERED</span>
</td>
</tr>
</table>
Something like this? (remove and collapse the border when happy)
td { border: 1px solid black; min-width:20px; }
.left { text-align:left;}
.right { text-align:right;}
.center { text-align:center;}
<table>
<tr>
<td class="right">></td>
<td class="center">
CENTERED
</td>
<td class="left"><</td>
</tr>
</table>
Can I make two line of a table not align, one tr is left, another is right, using position:relative or position:absolute and margin? But it also align.
How can I make two tr not align?
I want this:
What I want this is:
I have a html:
<table>
<tr colspan="2"><td>top</td><tr>
<tr><td>left 1 2 3</td><td>right</td></tr>
</table>
I want hide the 'left 1 2 3' slowly as a animate, then the width of 'right' becomes 100%
but the effect I need is when left td hide, the whole td move left, first text 'left' disappear, then 1, then 2,3, then the whole td hide.
I have tried this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
<style>
body{margin:0px}
</style>
<script>
function hid() {
$("#d1").animate({ "margin-left": "-102px" });
}
</script>
<table id="d1" cellpadding="0" cellspacing="0">
<tr >
<td style="position: relative; width: 100px; height:100px;border: 1px solid #0050D0;background: #96E555; cursor: pointer">
123
</td>
<td>
abc
</td>
</tr>
</table>
<input type="button" onClick="hid()">
This looks like what I want, but there is only one tr and it is move the whole table but not the tr.
You mean like this JSFiddle?
<table style='width:100%;'>
<tr>
<td style='text-align:right;'>RIGHT</td>
</tr>
<tr>
<td style='text-align:left;'>LEFT</td>
</tr>
</table>
Alternatively, the best way to do this is with two floated elements, as in this fiddle
<div style='border:1px solid black;width:100%;height:44px;'>
<div style='float:right;width:80px;border:1px solid black;height:20px;'></div>
<div style='clear:both;'></div>
<div style='float:left;width:80px;border:1px solid black;height:20px;'></div>
</div>
I have a div inside a td element. The div is resizable and it has overflow scroll. The problem is that the div resizes when I use JQuery to change the contents of the div. What I want is for the div to stay the same size when its contents change. Can someone tell me how to do this?
<table>
<tr>
<td style="text-align: right">Date: 8-29-2013</td>
<td></td>
</tr>
<tr>
<td><div id="mydiv" style="border: 1px solid black; overflow:scroll; resize: both; min-height:300px;min-width: 300px;"></div></td>
<td style="vertical-align: top"><button id="edit">Edit</button></td>
</tr>
</table>
<script>
$('#edit').click(function(){
$('#mydiv').html('A lot of text to demonstrate how the div resizes when I don\'t want it to.');
});
</script>
You need to set width to either Parent Element i.e., table or child element which you don't want to increase width. i.e, div.
I added width to parent element so that all child elements can control with that.
CODE:
#table{
width:165px;
}
<table id="table">
<tr>
<td style="text-align: right">Date: 8-29-2013</td>
<td></td>
</tr>
<tr>
<td><div id="mydiv" style="border: 1px solid black; overflow:scroll; resize: both;min-height: 300px;"></div></td>
<td style="vertical-align: top"><button id="edit">Edit</button></td>
</tr>
</table>
$('#edit').click(function(){
$('#mydiv').html('A lot of text to demonstrate how the div resizes when I don\'t want it to.');
});
JSFIDDLE
NOTE: change width according to your requirement.
You need add the width to the div
<div id="mydiv" style="border: 1px solid black; overflow:scroll;
resize: both; width:300px min-height:300px;"></div>
Perhaps it is because you have 2 min-heights. You need a max-height
I'm writing a program which will produce an html file for displaying some data. I need all columns to be aligned, so I'm trying to use a single html table, but I want to have solid horizontal lines in between some of the rows to separate the data. Using border-top and border-bottom I've been able to get most of the way towards what I want, however the horizontal lines that this produces aren't solid (see image).
My questions are:How can I get solid horiztonal lines between some of rows in my tableAlso, a minor query, is there a better way of getting a bit of space between the row labels in the left hand column and the data. Currently I'm specifying a blank column.The html behind that image is as follows:
<html>
<head>
<meta HTTP-EQUIV="Content-Type" Content="text/html; charset=Windows-1252">
<style type="text/css">
tr.border_top td {
border-top:1pt solid black;
}
tr.border_bottom td {
border-bottom:1pt solid black;
}
</style>
</head>
<body bgcolor=white><b>DATA</b></p>
<table>
<col align="left"></col>
<col width=20></col>
<col align="right"></col>
<col align="right"></col>
<col align="right"></col>
<col align="right"></col>
<tr class="border_top">
<td><b>XYZ1</b></td>
<td></td>
<td>2.120</td>
<td><span style="color:blue">2.280</span></td>
<td><span style="color:blue">2.810</span></td>
<td>3.000</td>
</tr>
<tr class="border_bottom">
<td><b>ABC1</b></td>
<td></td>
<td>1.370</td>
<td><span style="color:blue">1.550</span></td>
<td>1.690</td>
<td><span style="color:blue">1.780</span></td>
</tr>
<tr>
<td><b>XYZ2</b></td>
<td></td>
<td><span style="color:blue">1.900</span></td>
<td>1.940</td>
<td>2.050</td>
<td><span style="color:blue">2.100</span></td>
</tr>
<tr class="border_bottom">
<td><b>ABC2</b></td>
<td></td>
<td><span style="color:blue">1.910</span></td>
<td>1.950</td>
<td>2.060</td>
<td><span style="color:blue">2.100</span></td>
</tr>
</table>
</body>
</html>
In the CSS add the remove the default border-spacing and add padding to the cells
table { border-spacing:0 }
td { padding:10px; }
JSFiddle Demo
Give your table a class, for example mytable.
Then in your CSS do:
.mytable {
border-collapse: collapse;
}
.mytable td {
padding: .2em;
}
The collapse makes the space between cells go away and therefore makes a continuous border, like you asked for. However, then all the texts are very close together, so a little padding on the cells makes it look nicer.
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; }