I'm using tables for semantic markup but styling them to resemble lists of multiple lines with icons to the left: http://jsfiddle.net/qs1zsL2s/
However, the inline-styled cells are shown one pixel down from the icons. How do I prevent this, so they begin at the same y-position?
HTML:
<table>
<tbody>
<tr><td><img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="HTML5 logo"></td><td>First cell</td><td>Second cell</td><td>Third cell</td></tr>
<tr><td><img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" alt="HTML5 logo"></td><td>First cell</td><td>Second cell</td><td>Third cell</td></tr>
</tbody>
</table>
CSS:
td {
display: inline;
background-color: red;
}
td:first-child {
display: block;
float: left;
}
td:last-child {
display: block;
}
img {
height: 48px;
}
Just updated your fiddle: Fiddle
Just add vertical-align: top to your td
td {
display: inline;
background-color: red;
vertical-align:top;
}
For reference: https://developer.mozilla.org/en/docs/Web/CSS/vertical-align
You can simply add in the CSS properties position:relative and top:1px:
td:first-child {
display: block;
float: left;
position: relative;
top: 1px;
}
fiddle
Related
I need some help in a sizing question. If you view the following code in desktop browsers, everything is sized as it should be. If you try to open it on a mobile phone (I have tested it with several iPhones), the td (white with grey border) is not resized properly. The td element is resized correct, if there is a span element that's causing the overflow.
div.highlighter-rouge {
overflow-x: scroll;
}
div.highlight {
width: 100%;
}
.highlight {
display: inline-block;
}
.highlight {
background-color: #eeeeee;
}
pre.highlight {
margin-top: 0;
margin-bottom: 0;
}
pre code {
white-space: pre;
}
table {
margin: 15px 0;
padding: 0;
}
table {
word-wrap: anywhere;
}
table tr {
border-top: 1px solid #cccccc;
background-color: white;
margin: 0;
padding: 0;
}
table tr td {
border: 1px solid #cccccc;
text-align: left;
margin: 0;
padding: 6px 13px;
}
table tr th :last-child,
table tr td :last-child {
margin-bottom: 0;
}
table tr th :first-child,
table tr td :first-child {
margin-top: 0;
}
td.rouge-code>pre>span {
display: inline-block;
}
.highlight .nt {
color: #000080;
}
.highlight .s1 {
color: #d01040;
}
html {
-webkit-text-size-adjust: 100%;
}
<div class="language-bash highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2</pre>
</td>
<td class="rouge-code">
<pre>ausearch <span class="nt">-c</span> <span class="s1">'ajp-bio-0:0:0:0'</span> <span class="nt">--raw</span> | audit2allow <span class="nt">-M</span> my-ajpbio0000
semodule <span class="nt">-i</span> my-ajpbio0000.pp</pre>
</td>
</tr>
</tbody>
</table</code>
</pre>
</div>
</div>
I've tried many things now, but my level of knowledge about this, just leads to trial and error. If you don't really like the solution with tables, I can also create a version with the exact same behaviour without them.
https://codepen.io/ribbonCaptain/pen/GRrqgpE
.rouge-table td {
vertical-align: top;
}
.rouge-table td pre {
white-space: pre-wrap;
}
...will do it. See it here.
There's not much to explain.
https://jsfiddle.net/tbnzaga9/
#smenu a {
color: black;
text-decoration: none;
}
.button:hover {
background-color: #A9A9A9;
}
.button {
position: absolute;
border: 1px solid black;
cursor: pointer;
background-color: #d3d3d3;
width: 30%;
left: 1%;
}
.right {
position: absolute;
right: 60%;
}
#smenu table tr td p {
display: inline-block;
float: left;
}
<div id='smenu'>
<table>
<tr>
<th> Title</th>
<th class='right'> Date</th>
</tr>
<tr>
<td class='button'>test</td>
<td class='right'>
<p>4/27</p>
</td>
</tr>
</table>
</div>
I was making a list of separate websites and the dates they were made, but I can't get them to line up! I tried float:left and display: inline-block, but it's just not lining up. Any suggestions?
Also - is there a better way than using a table?
try these change in CSS.
#smenu a {
color: black;
text-decoration: none;
}
.button:hover {
background-color: #A9A9A9;
}
.button {
border: 1px solid black;
cursor: pointer;
background-color: #d3d3d3;
}
td {
text-align: center;
width: 200px;
height:25px;
}
#smenu table tr td p {
//display: inline-block;
//float: left;
}
Try to replace <p></p> by <div></div> or use a css reset sheet to clear the paragraph doing a line break. Also, I think tables are ok to do things like this, but limit you more. If you really wanted to you could mimic a table with some divs where you have your rows and in each one have your columns you could have differents classes by rows and by column in different rows.
I would remove all "position:absolute".
Given that you have tabular data, it makes sense to just use a regular table tag.
I've also added the following styles:
.right {
padding-right: 60%;
}
#smenu table {
width:100%;
}
.right p {
margin:0px;
}
th {
text-align: left;
}
You can see the changes here:
https://jsfiddle.net/tbnzaga9/2/
I am a newbie to css.
I have two td in a row of which first has overflow visible. The contents in the first div are overlapping with the second td as in the example below. I wish to make the div css properties like cursor: pointer over the second td. Thus, the div css properties should be on top of the second td.
Please help me with this.
https://jsfiddle.net/jt00uk3e/
Thanks.
table {
width: 0px;
table-layout: fixed;
}
td {
width:50px;
height:50px;
overflow: visible;
}
#td1 {
background-color: red;
}
#td2 {
background-color: green;
}
#div2 {
width: 200px;
height: 20px;
background-color: blue;
cursor: pointer;
}
<table>
<tr>
<td id="td2"><div id="div2"></div></td>
<td id="td1"></td>
</tr>
</table>
Add z-index to div
#div2 {
width: 200px;
height: 20px;
background-color: blue !important;
cursor: pointer;
position:relative;
z-index:
https://jsfiddle.net/jt00uk3e/6/
try this:
table {
width: 0px;
table-layout: fixed;
}
td {
width:50px;
height:50px;
overflow: visible;
}
#td1 {
background-color: red;
}
#td2 {
background-color: green;
}
#div2 {
position:relative;
z-index:1;
width: 200px;
height: 20px;
background-color: blue;
cursor: pointer;
}
<table>
<tr>
<td id="td2"><div id="div2"></div></td>
<td id="td1"></td>
</tr>
</table>
I want to click on HTML table cell and open new page. The solution is working fine if I have text into table sell. But if I have empty cell there is no hyperlink.
tr.clickable td a {
display: block;
background: green;
text-decoration:none;
}
How I can fill the cell space with the empty hyperlink?
tr.clickable td a {
display: block;
background: green;
text-decoration:none;
}
tr.clickable td a:after{
content: '';
display: inline-block;
}
<table width="100%" border="1">
<tr class="clickable">
<td>
</td>
</tr>
</table>
another solution
You can use :empty pseudo element.
tr.clickable td a:empty{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
You can give it fixed min-height and min-width, for example:
tr.clickable td a {
display: block;
background: green;
text-decoration:none;
min-width:10px;
min-height:10px;
}
EDIT:
Another solution is to use the CSS content property with before or after pseudo elements, by adding content: "\200B";, like this:
tr.clickable td a {
display: block;
background: green;
text-decoration: none;
}
tr.clickable td a::before {
content: "\200B";
}
<table width="100%" border="1">
<tr class="clickable">
<td>
</td>
</tr>
</table>
I need to create a headline with equal length lines on both sides of the headline text, and a fixed size padding between the lines and the text. The text will vary so it must not set a width. The lines should take up all remaining width available in the headline container. The headline text must not set a background because the background behind it will vary. Something like this:
--------------------------------------------------------- Some text ---------------------------------------------------------
I solved it using a table:
<table width="100%">
<td><hr /></td>
<td style="width:1px; padding: 0 10px; white-space: nowrap;">Some text</td>
<td><hr /></td>
</table>
You can try it out here: http://jsfiddle.net/md2dF/3/
Semantically this is a really bad solution, the headline has nothing to do with tabular data. How would you do this without a table?
To summarize (because the suggested solutions have all overlooked one or more requirements):
The headline must not have a fixed width
The headline text must not have a background
The headline text must not have a fixed width
The lines on either side of the text must take up all remaining width
The padding between the lines and the text must have a fixed width
If in doubt, look at http://jsfiddle.net/md2dF/3/
Newer answer that works on newer versions of IE and Firefox
Without any tricks:
fieldset.title {
border-top: 1px solid #aaa;
border-bottom: none;
border-left: none;
border-right: none;
display: block;
text-align: center;
}
fieldset.title legend {
padding: 5px 10px;
}
<fieldset class="title">
<legend>Some text</legend>
</fieldset>
Live demo on jsfiddle
Edit:
Without any background color nor image:
<div>
<div><hr></div>
<span>Some text</span>
<div><hr></div>
</div>
CSS:
div {
width:300px;
text-align:center;
display:table;
}
div > div {
display:table-cell;
vertical-align:middle;
}
div > span {
white-space:nowrap;
}
Works in IE8+
Live demo
Original answer:
Without any image:
<div>
<span>Some text</span>
</div>
CSS:
div {
border-bottom:1px solid #000;
line-height:16px;
text-align:center;
}
span {
background:#FFF;
position:relative;
bottom:-8px; /* half of line-height */
padding:0 15px;
}
Live demo
You can use any block element you want (h1, h2, whatever) instead of div.
The way to solve this without knowing the width and the background color is the following:
Structure
<div class="strike">
<span>Kringle</span>
</div>
CSS
.strike {
display: block;
text-align: center;
overflow: hidden;
white-space: nowrap;
}
.strike > span {
position: relative;
display: inline-block;
}
.strike > span:before,
.strike > span:after {
content: "";
position: absolute;
top: 50%;
width: 9999px;
height: 1px;
background: red;
}
.strike > span:before {
right: 100%;
}
.strike > span:after {
left: 100%;
}
Example: http://jsfiddle.net/z8Hnz/
You can do it like so (for the background, you can make a 1px image of your color choice):
<h1><span>Some Text</span></h1>
h1 { width: 100%; text-align: center; background: url(pixel.jpg) repeat-x left center; }
h1 span { padding: 0 3px; background-color: #ffffff; }
Edit: Without bg color:
.hr { width: 100%; height: 40px; line-height: 40px; }
.hr span { width: 10%; text-align: center; float: left; margin: 0; display: inline-block; }
.hr .line { width: 45%; height: 100%; background: url(pixel.jpg) repeat-x left center; float: left; }
.hr .line.right { float: right;}
<div class="hr">
<div class="line left"></div>
<span>Some Text</span>
<div class="line right"></div>
</div>
You'll need to adjust percents and whatnot, but it works in general.