I'd like to create a table that looks like this:
lolvalue---------|lol date|some other column data 1
lolvalue12345|lol date 2|some other column data2
in CSS/HTML. Basically, there is "data" and there is a filler that goes to the right, but doesn't count as data, so it doesn't stretch the column, filling the space stretched by the max-length row.
It's like in those old content books where there were dots guiding us to the right page, remember?
How could I do that? There is no property like "padding-backgrond". I can probably create this by using layers for only one column but then, how do I determine the width of the layer?
Another approach would be to generate appropriate amount of characters within software, but hmm, that wouldn't be portable across fonts and browsers.
I use Ruby on Rails for server-side, if it makes a difference.
You could add a background-image to your td and wrap the inner text with an inline element such as a span and style that with a background-color:
<style type="text/css">
td { background:url(dot.gif) 0 0 repeat-x; }
td span { background-color:#fff; }
</style>
<table>
<tr>
<td><span>loltext</span></td>
<td>loldate</td>
</tr>
<tr>
<td><span>lolvalue12345</span></td>
<td>lol date</td>
</tr>
</table>
This way, you wouldn't need to assign a width.
A quick cheat I've used in the past is to flood all the fields with the trailing characters (like '------------------...') and then hide the overflow with with css.
<table>
<tr>
<td>lolvalue------------------------------------</td>
<td>lol date</td>
</tr>
<tr>
<td>lolvalue12345-------------------------------</td>
<td>lol date</td>
</tr>
</table>
And then style it with:
td { width:50px; overflow:hidden; }
css:
.extendo { background: url(dot.gif) 0 0 repeat-x; width: 100px; }
.words { background: none; }
markup:
<div class="extendo"><span class="words">lalala</span></div>
you may need to specify padding or alternate background
Related
My code is similar to as follows:
table,tr,td {
border-collapse:collapse;
border: 1px solid black;
}
label {
font-size: 0.7rem;
}
table {
table-layout: auto;
}
<table>
<tbody>
<tr>
<td>
<input>
</td>
</tr>
<tr>
<td>
<label>Foo bar</label>
</td>
</tr>
</tbody>
</table>
The issue occurs when the element on top is bigger than the element on the bottom. I know the solution seems obvious: use table-layout: auto; However, as you can see, that doesn't work.
There is no padding or margin, and the height is not set manually on either of them. My question is as follows: Why is the space there, and, more importantly, how can I remove it?
I feel really stupid now: it was just the line-height property. I set it lower and that fixed it.
Edit: A more simple solution suggested by VilleKoo is to set the display property of the <label> to block or flex (setting the padding to 0, which is mentioned in the comment, is not required)
This isn't actually an order form (as yet) but I think that best describes it. I want to create a grid of 3 images inline, then text below each, then repeat indefinitely. I tried turning each row into a unique table but alignment became a problem. Then I tried making one table and giving the image and text < tr >'s unique classes, but I'm having trouble getting the height of the text rows to shrink to a more aesthetically pleasing size, and also centering the text below the image. I tried to do this artificially with as many "& nbsp's" as was appropriate, but then the text started wrapping onto a new line and it messed all that up. Code and link to js fiddle below:
<table id="saladGrid">
<tr class="saladPics">
<td id="one"></td>
<td id="two"></td>
<td id="three"></td>
</tr>
<tr class="saladText">
<td class="text"><p> acorn squash, golden beets, pistachios</p></td>
<td class="text"><p> roasted eggplant, herbed ricotta, sumac</p></td>
<td class="text"><p> arugula, fennel, blackberries, quinoa, pickled shallots</p></td>
</tr>
http://jsfiddle.net/jshweky/5bTW8/
(On a side note, I'm new to stackoverload so if there's any protocol I'm not following with respect to posting, I'd be grateful for any tips/suggestions. Thanks!)
Have a look at this: http://jsfiddle.net/EX9f9/
If you have a look at the code below you'll notice a couple of things:
HTML
<table id="saladGrid">
<tr class="saladPics">
<td class="s1"></td> //I changed your classes 'one','two',etc
<td class="s2"></td>
<td class="s3"></td>
</tr>
<tr class="saladTxt">
<td class="txt"><p>acorn squash, golden beets, pistachios</p></td>
<td class="txt"><p>roasted eggplant, herbed ricotta, sumac</p></td>
<td class="txt"><p>arugula, fennel, blackberries, quinoa, pickled shallots</p></td>
</tr>
</table>
In your HTML I changed your id's one, two, etc to classes consisting of the same word/letter, only a different number, for better readability. (Those could also be ID's btw, the main point is the use of equal terms with only one differentiator)
CSS
table {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
border: 0px;
border-spacing: 0px;
}
td {
margin: 0px;
padding: 0px;
border: 0px;
text-align: center;
vertical-align: middle;
}
#saladGrid {
width: 600px;
height: 400px;
}
#saladGrid table {
margin: 0 auto;
border-spacing: 30px;
}
.saladPics td {
width: 350px;
height: 350px;
background-position: center;
background-size: 350px 350px;
background-repeat: no-repeat;
border-radius: 50px;
}
.saladPics td.s1 {background-image:url("http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1989_zps38d802a7.jpg");}
.saladPics td.s2 {background-image:url("http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1483_zpsc4ca87cf.jpg");}
.saladPics td.s3 {background-image:url("http://i1281.photobucket.com/albums/a514/jshweky/Gourmade%20to%20Order/IMG_1992_zps1b881869.jpg");}
In your CSS I removed all the repeated declarations and put them together in one overlapping class. Now, only the background-image has a separate rule for every separate element.
I removed a couple of rules you don't need (and probably added in an failed attempt to style the table to your liking).
At the start I added two rules: table and td. Those are two general classes I always put at the start of my CSS, it's alright if you overwrite some of it later by other rules, these just ensure that the browser doesn't doe any funky business.
I put the whole table in a div, to show you how to contain the size of a table (but notice that the height is still more than the 400px I gave it).
Notice the text-align:center; and vertical-align: middle; in the td rule. These alight your text horizontally and vertically. (The answer to your main question)
IMPORTANT: vertical-align:middle; only works on tables, no other elements. Keep that in mind!
About your first problem:
"...trouble getting the height of the text rows to shrink to a more aesthetically pleasing size..."
This is unfortunately a property of the table: it will form itself to the content and the space it has on the page. It will fill every inch it gets and will automatically stretch to fit the content. You CAN NOT (as far as I know) limit the size of one row of a table.
Only solution would be to put the table in a div and limit the height of the div so that the whole table gets squished together, and even then I couldn't tell you for sure how the table will behave.. you push it in a tiny corner, there's no telling what it will do:)
I am trying to show a checkmark in the top right corner of a td. I can't seem to get it there without expanding the whole tr. This is my table:
<tr style="position:relative;>
<td><p class="mark" style="position:relative; left:10px;></p><input type="text"></td> <-- in this td the icon should be placed.
...more rows...
</tr>
I just tried using a class for the icon and making the tr relative and the td relative but it keeps expanding the td's height.
Any ideas?
You can use first-child selector and background-position attribute to show icon on right top of first td
tr:first-child td:first-child
{
background-image:url('http://files.softicons.com/download/toolbar-icons/iconza-light-green-icons-by-turbomilk/png/32/check_mark.png');
background-position:right top;
background-repeat:no-repeat;
padding-right:35px;
padding-top:5px;
padding-bottom:5px;
}
You can shorten this like
tr:first-child td:first-child
{
background:url('http://files.softicons.com/download/toolbar-icons/iconza-light-green-icons-by-turbomilk/png/32/check_mark.png') no-repeat right top red;
padding:5px 35px 5px 0
}
JS Fiddle Demo
Since you cannot use a position rule on table cells (prohibited by standards, only strictly enforced by Gecko) you have to use a workaround with another element inside, or use some other solution. Also you shouldn't be generating images for 'semantic' stuff like this, use classes, makes it both easier to generate, and easy to manipulate with JS.
HTML
<table>
<tr>
<td class="checked">...data 1...<br>multiline</td>
</tr>
<tr>
<td>...data 2...</td>
</tr>
<tr>
<td class="checked">...data 3...</td>
</tr>
</table>
CSS
td{
background:#fcf4cf;
}
td.checked:before {
content:url(http://www.kyoceradocumentsolutions.com.au/Style%20Library/en-us/Images1/TickMark.gif);
float:right;
padding-left:4px;
}
See this work on JSFiddle
This is compatible with all major browsers and semantically more correct than your current approach, with shorter CSS and HTML.
I have a web page that I'm generating, where there is a h2 with a green background labeling a table. The table can have any number of columns and I would like the h2 element to extend horizontally as far as the user can scroll, so that there is always a green bar above the table. The effect I'm trying to achieve is a green bar that spans at least the width of the table, so that it is always directly above the table, no matter how far the user scrolls.
Here is what it currently looks like (the red outline shows approximately the edges of the containing html, body, and div elements):
And here are the relevant pieces of code:
css:
h2 {
font-family:Arial;
font-size:20pt;
color:#FFFFFF;
text-align:left;
font-weight:normal;
background-color:#00693C;
clear: both;
padding:2px;
margin: 0px;
}
table.response {
border:1px outset;
border-collapse: separate;
}
table.response td {
font-size: 14px;
padding: 3px;
border:1px inset;
}
html:
<h2>[snip]</h2>
<table class="response">
<tbody>
<tr>
<td>[snip]</td>
[...]
</tr>
[...]
</tbody>
</table>
Things I have tried already that haven't worked:
A <thead> element containing a single <tr> and a single <th> where the colspan on the <th> is set to the number of columns in the table. This works for smaller numbers of columns, but for larger tables (for example, with colspan="6000"), some browsers (specifically, Firefox 11) render the cell (and its background) as only taking up one column.
A <thead> element containing a single <tr> and one <th> with colspan="2" and the background-color CSS property set for the <tr> element. Using Firefox's Inspect Element feature, it showed that the <tr> spanned the entire width of the table, but the background was only applied to the one cell.
A <thead> element containing a single <tr> and one <th> with colspan="2" and another <th> for every remaining column of the table. I tried to remove the separation between cells on the <thead>, but I was unable to.
My question is this: Is there a way to achieve the effect of having the green bar extend at least the entire width of the table, and if so, what is it? I would prefer not to use JavaScript or have to generate style code when I generate the HTML for the table.
Add float: left or display: inline-block to the element that contains the table and h2.
Add
div#container { display: inline-block; }
To your CSS, and embed the <h2> and <table> inside a DIV with that name:
<div id='container'>
<h2>...</h2>
<table>
...
</table>
</div>
That should work in any modern browser.
Is there anything I can do to make IE display table cells as actual blocks?
Given this style:
table,tbody,tr,td,div {
display: block;
border: 1px solid #0f0;
padding: 4px;
}
And this html:
<table>
<tbody>
<tr>
<td>R1C1</td>
<td>R1C2</td>
<td>R1C3</td>
</tr>
</tbody>
</table>
<div>
<div>
<div>
<div>R1C1</div>
<div>R1C2</div>
<div>R1C3</div>
</div>
</div>
</div>
The table renders exactly the same as the nested divs in both Firefox and Safari/Chrome. But in Internet Explorer (8) the property display: block has no effect. The table renders exactly as if I don't set that property.
My main problem is that the cells don't break; They all render on one line. (The tbody and tr elements don't get any borders nor padding. That is not a problem for me right now, though.)
I haven't found any information on the problem when searching. Compatibility charts on quirksmode and elsewhere states that IE supports display: block since v. 5.5. Any discussion on table display problems seems to be when doing the reverse - giving non-table elements any of the display: table-* properties.
So once again, is there anything I can do to make IE render table cells as block?
(The real table is really a table, with tabular data. I would like to keep it that way, and restyle it unobtrusively.)
I applied float: left to stuff. It kinda works.
Live Demo
The biggest problem is width: 100% combined with the padding is making things too wide.
So:
Live Demo (without the problematic padding)
That looks a bit better, but I'm not sure how you can easily add padding everywhere if you need it.
This fails --> miserably <-- in IE7 (it just won't get over the fact that it's a <table>), and even if you don't care about IE7, it will need tweaking for your use case (if it's usable at all).
IE7:
The following worked for me for IE6+:
tr {
display: block;
position: relative
}
td.col1 {
display: block;
left: 0;
top: 0;
height: 90px;
}
td.col2 {
display: block;
position: absolute;
left: 0;
top: 30px;
}
td.col3 {
display: block;
position: absolute;
left: 0;
top: 60px;
}
Assumptions:
cell height 30px
Drawbacks:
Fixed cell height
Cumbersome specification of top property (maybe generate)
Only works when HTML provides classes for columns
Advantage:
Works in all browsers.
When to use:
When you have no control over HTML, but have control over CSS. Some hosted payment solutions come to mind that display in an IFRAME and offer a custom style sheet.
Just figured it out with a collegue of mine.
ALTHOUGH I STRONGLY RECOMMEND TO NOT SUPPORT IE8 AT ALL ANYMORE!
Since you are facilitating the use of an unsupported and currently unsafe product that is not up to par with current standards and techniques. It would be way better to tell your users to upgrade and give them some browser downloadlinks to choose from.
That being said. The CSS below is the minimum css you need to fix it in Internet Explorer 8.
table {
width: 100%;
}
td {
float: left;
width: 100%;
}
<table>
<tbody>
<tr>
<td>cell-1</td>
<td>cell-2</td>
</tr>
</tbody>
</table>
add this code:
<!DOCTYPE html>
我这里是这么解决的，加上上面那条声明语句，display:block对td就会有效。
you need add this code in the top.
<!DOCTYPE html>
<html>
<head>
<style>
td {
display: block;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Job Title</td>
</tr>
</thead>
<tbody>
<tr>
<td><div>James</div></td>
<td><div>Matman</div></td>
<td><div>Chief Sandwich Eater</div></td>
</tr>
<tr>
<td><div>The</div></td>
<td><div>Tick</div></td>
<td><div>Crimefighter Sorta</div></td>
</tr>
</tbody>
</table>
</body>
</html>
Add this line of code in the top, but use 'float' and 'width' is very good.
sorry, my english so poor.
make it display:table-row; instead of display:block
It will work like it is supposed to