I am currently working on turning a normal html table like so:
into and indented version as follows:
Even if I can't set this in html someone might know of a way in which I can hide the initial part of the border to match the start of the text.
There are several bad ways to do this, I'm sure. You'll just have to get creative.
Here is one example to do this, with some classes, empty table cells and colspans:
http://jsfiddle.net/ESFuC/
You can achieve this by playing about with the table cells and taking advantage of display:inline-block; there are other ways to achieve this but this should work across most browsers.
Fiddle with demo
Maybe with divs inside cells like this;
http://jsfiddle.net/UdF98/
I colored the bottom line red, seems fine except the one at the bottom. Maybe you can modify to suit your needs.
Related
I wish to trick bootstrap rows somehow. I need to put many col-..-.. items in only one row (there are about 8 really complicated .js files that I'm afraid of altering - and it points to children of the div that I additionally used as a bootstrap row). No way to trick the HTML, I have tried many-many ways. In case you don't believe me, check out the specific problem.
Image here
*The red boxes are the images that I'm using and the striped space is left blank. If I align the element that is on the blank row, the next one goes there and the problem is still unsolved.
What's quite interesting that Firefox and IE show everything the way I them to
but Chrome and Edge do not.
Can anyone help me on this? I'm sure there must be some easy way that I missed out, like altering some of the default bootstrap row class properties, but I just couldn't get it. Any suggestions are appreciated.
Solved using CSS Grid layout.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
The problem is that the border I made for the thead isn't following the rules that I made for it - the position, which is moved down, and a little to the left. How can I move the border so it "sticks" to the thead?
http://jsfiddle.net/GRf9v/188/
Try to avoid using positioning in a table. Positioning is intended for block elements, not tabular data as such. I don't think it is helping you achieve what you want in this instance.
Is this closer to what you want?
http://jsfiddle.net/GRf9v/189/
This should not be a table. See updated answer: http://jsfiddle.net/GRf9v/190/
Hopefully that will help you get going.
In case you opt in not using tables for that, you may check this out.
http://jsfiddle.net/athanph/6hhPK/
I am trying to duplicate something similar to a windows form toolbar in html. I've created an example of what I am currently working with. Seems great, but when I load it into IE7 the buttons end up going to the next line.
The only other way I can think of is use a table with two columns and text-align the second column. Anyone have any suggestions?
http://jsfiddle.net/nyEw7/
Seems like this question was already asked. I am looking for IE7 workarounds.
Display two divs in a single line filling space - CSS
Use float: left/right. Here's an updated jsfiddle:
http://jsfiddle.net/nyEw7/1/
I think this has been asked a million times, but with different definitions of the problem. And it's probably either easy to fix or a long lasting wish from web designers and still unanswered. note: I did do a search on css float on stack, but although some look like my problem, so far I haven't found a similar one.
What I'm trying to do will become clear if you see the attachment. I want them in rows of 3 neatly stacked under each other, where the height of each <li> item is different. In other words: the heighest <li> element in a row is leading, and the next row of items should wrap under this one. Right now the items on the new row bump into the content of a longer list item at the beginning, preventing the first item of the new row to fully float to the left.
Please note that I don't want to solve this with php or js, I think a pure css solution must be out there... Because with php, I could of course add a class like "new-row" to it and apply a clear: both to it and it will wrap. If I want to do the same thing in CSS then I can't without using poorly supported :nth-of-type stuff. Besides, the content block is variable in width, so sometimes there are 3 on a row and sometimes maybe only 2 or up to 6.
Who can help?
Use "display:inline-block" for LI, not "float:left"
I'm happy to be proven wrong, but I think you have to use tables for this, or a display: table-* construct. (I personally would go with tables - this is somewhat tabular data.)
Only table rendering can resize a whole row according to its tallest member's height.
It's the only way I can see to do this without JS or PHP.
use jQuery.
Pretty sure this is impossible using just CSS. Unless you're going to use absolute positioning and forget floats all together.
I hope I am wrong though! :)
(Would love to be able to do this w/ css)
See the picture above. Each navigation tab needs to have 2 pixels separation on either side and line up exactly with the header image on the edges.
Now they would like to introduce a 5th navigation tab (and possibly a 6th). Is it possible to code this in a way where you could stick a 5th or 6th tab in there and everything would resize appropriately with lists or tables or some other solution? Still keeping the 2 pixels separation and lining up with the edges exactly? I wasn't sure if it was possible or you would just have to define the widths each time for each tab based on the math involved to line it all up correctly flush with the edges.
I think the best way is to emulate table behavior with CSS. So you can use a list, and still get table behavior.
ul {
display:table;
}
li {
display:table-cell;
}
Here is a demo displaying this with CSS and proper markup. Here's a demo of how it looks with an actual table. I'm not certain on IE<8 support for this CSS, so it may be something to be aware of.
UPDATE: Confirmed: This is not supported on IE6 or 7 natively. You may be stuck with tables or hard-coded widths if you want to support those browsers. There may be a javascript fix to support these display values but I'm not aware of it.
EDIT: I realized my demos were sloppy, so I made another that actually addresses your point about the margins, it uses the :first-child selector to remove the margin from the first link, giving the evenly distributed appearance. http://jsfiddle.net/wesley_murch/pe6wd/3/
It may not be easy. One of the requirements in most implementations of css horizontal menu type displays is setting a fixed width for each element. If you try and do percentages, things start to come apart. However, any thing is possible.
Have you tried looking at LESS or SASS so you can do simple math in CSS?