How do I set CSS to show borders inside td rather than outside on hover. Normally when I hover a cell and I have set border in hover style, the table rows moves by width of hover border. I want it to show inside thus no moving. (For example cell is 10px width and I add 2px border I still want it be 10 pixel width but with 2px border on each side, thus 6px left for consent.)
jsfiddle: http://jsfiddle.net/reg4f/
Here's my HTML:
<table>
<tr>
<td>
<a>po</a>
</td>
<td>
<a>út</a>
</td>
</tr>
<table>
and CSS
table {
width: 250px;
height: 250px;
table-layout: fixed;
border: solid black 1px;
border-collapse: collapse;
}
table td, table tr {
text-align: right;
vertical-align:middle;
}
td:hover{
background-color: #E5F3FB;
border: solid 4px #70C0E7;
border-style: inset;
}
td a {
display:block;width:100%;height:100%;margin:0
}
You can try to add a white or transparent border to the cell, when it's not :hover and override this white border by your colored one when it's :hover. So you have no moving.
td {
border: solid 4px rgba(0,0,0,0);
}
Here is an example:
http://jsfiddle.net/G6w9P/
I'd suggest adding padding to not hover of the same width as the border on hover. On hover remove the padding and add the border.
Something like:
td{
padding:2,2,2,2;
border:none;
}
td:hover{
padding:0,0,0,0;
border:solid 2px red;
}
Cheers
-L
Related
I have table which is very long vertically, then it must use overflow: auto hidden.
I have to prepare header of this table as fixed to the top of the page after scroll (prevent to hide header of the table after scrolling).
The problem is when I trying to use position: fixed; top: 100px on the thead or thead tr, this header is losing conection to the table and tbody and width of this is not as tbody (th aren't connected to appropriate td in body).
Also tbody is losing overflow: auto hidden and now has typical width 100% of the page.
SOME CONTENT BEFORE
<div style="overflow: auto;" class="table-responsive">
<table class="products-table">
<thead>
<tr>
<th>First</th>
<th>Second</th>
<th>Third</th>
<th>Fourth</th>
<th>Fifth</th>
<th>Sixth</th>
<th>...</th>
<th>...</th>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
<td>Fourth</td>
<td>Fifth</td>
<td>Sixth</td>
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
</div>
SOME CONTENT AFTER
Styling:
.products-table
border-collapse: separate
border-spacing: 0 12px
min-width: 100%
font-size: 15px
border-bottom: 4px solid grey
td,th
padding: 0 10px
max-width: 300px
&:first-of-type
border-radius: 9px 0 0 9px
padding-left: 14px
&:last-of-type
border-radius: 0 9px 9px 0
padding-right: 14px
thead
background-color: grey
color: white
font-weight: 700
th
height: 26px
white-space: nowrap
a
color: white
tbody
tr
padding: 0 14px
td
word-break: break-word
background-color: white
max-width: 300px
&:nth-of-type(odd) td
background-color: #f6f6f6
Help, please...
I have tried yet many options based on similar questions, like for example position sticky.
You may add the following codes into ur css.
thead tr th {
/*Fixed Scroll*/
position: sticky;
top: 0;
z-index: 9999;
}
table {
position: relative;
}
I'm trying to horizontally align two absolute positioned elements inside a flex item.
This is my current CodePen
HTML :
<div class="stepper-wrapper">
<ul class="step-wrapper" >
<li class="step__bubble"></li>
<li class="step__circle"></li>
</ul>
<ul class="step-wrapper" >
<li class="step__bubble"></li>
<li class="step__circle"></li>
</ul>
</div>
CSS :
.stepper-wrapper {
display: flex;
flex-direction: row;
}
ul {
border: 1px solid grey;
height: 0px;
position: relative;
top: 40%;
min-width: 100px;
flex: 1;
li.step__bubble {
display: inline-block;
vertical-align: middle;
}
li.step__bubble::before {
content: "";
position: absolute;
top: -9px;
left: calc(50%);
display: block;
width: 16px;
height: 16px;
border: 2px solid grey;
border-radius: 50%;
background: white;
}
li.step__circle {
width: 8px;
height: 8px;
border: 1px solid red;
border-radius: 50%;
display: block;
position: absolute;
top: -4px;
left: calc(50% + 1px);
}
}
What I want to do is :
Having the grey circle vertically and horizontally aligned over the
line. Vertically is not really a pb, I'm able to set a fixed value as the height of the .stepper-wrapper will be fixed. Horizontally needs to be adaptative and it's where I'm stuck.
Having the red circle right inside the grey circle
I tried to use the calc() function and set it to (50% - width_of_element_in_px/2) for both circles, but I don't know why, each px seems to be ~10px.
Thx for your help
Welcome to the club of the LESS users pwned by calc() and string interpolation
I've been using LESS since 5 years and it still happens from time to time :(
Sooo tl;dr calc() was and is a LESS function that its compiler will happily output as some result (probably 50% + 10(stripped) => 60%).
If you want LESS compiler to output calc() the CSS Level 3 function, you need to escape it, that is wrap it in ~"calc(50% + 5px)"!
Codepen
EDIT: also see https://stackoverflow.com/a/17904128/137626
EDIT2: couldn't find an entry about calc in LESS documentation oO but the problem is explained in http://lesscss.org/usage/#command-line-usage-options (search "calc" in text). strict-math is a cool option but you'll have to make sure everybody else has it activated (won't be the case by default)
Rendering a table, with boarders, to PDF using phantomjs leaves each individual cell bordered but with a gap between each cell. The table is displayed correctly, without such gaps, on a web page.
in my CSS I've tried setting:
border-collapse: collapse;
border-spacing: 0px 0px;
to no avail, I need to get rid of those gaps between cells in my PDF.
Any ideas would be gratefully received.
Yours Allan
Be sure to add the border-spacing and border-collapse rules to the <table> and not the <td>. This is my phantomjs-specific rules:
.table {
border: 1px solid black;
border-spacing: 0px 0px;
border-collapse: collapse;
}
.table th,
.table td {
padding: 5px;
border: 1px solid black;
margin: 0;
}
Note that this is a bit different than 'normal' (not phantomjs-pdf) css where your border-collapse can be located on the <td> element.
When using a rounded border on an image, webkit browsers hide the border behind the image
CSS
img {
border: 10px solid #000;
border-radius: 100%;
}
HTML
<img src="http://25.media.tumblr.com/tumblr_mbjei3b3re1r30y2do1_500.jpg" />
Bug reproduced # http://jsfiddle.net/zPpVm/
This is probably related to this Webkit bug, but I cannot find a suitable work around.
A possible workaround is to use a box-shadow:
box-shadow: 0 0 0 10px black;
Live Example
The main problem: It won't be calculated in the box-model
As another workaround, you can wrap your image like this:
<span class="img_container" >
<img src="http://25.media.tumblr.com/tumblr_mbjei3b3re1r30y2do1_500.jpg" />
</span>
Than style elements:
.img_container {
border: 10px solid #000;
border-radius: 100%;
display: inline-block;
overflow: hidden;
}
.img_container img {
display: block;
}
All modern browsers except Opera will render it correctly.
I have a dashboard in which I'd like a scrolling ticker. (We'll know if the UI sucks or not once it's been running on the wall for a while.) Because this is a specific purpose dashboard, we can assume a recent WebKit in our markup and use even the latest CSS3 markup if it's implemented.
This is some exemplary markup, but we're free to change it as needed, although I'd prefer to keep it relatively semantic if possible:
<div class="ticker">
<div class="itemDiv">
<img src="x">
<div class="itemBodyDiv">
<span>Upper Box</span>
<span>Lorem ipsum dolor sit amet</span>
<span>Lower Box has longer text</span>
</div>
</div>
</div>
This is the layout I'd like to achieve:
The outer solid black line is a div. The dashed line is a div that represents an individual item in the ticker. Items will scroll right-to-left using -webkit-marquee. The main body of the ticker item is the lorem ipsum text, which needs overflow-x set to cause the marquee behavior. The main body should be text-align: middle.
The problem I'm having is in finding suitable CSS markup to describe the position of the Upper Box and Lower Box. I've tried several permutations of display: inline and inline-block that didn't work. They either ruined the marquee behavior or moved the main body over. It seems that they need to be pulled out of the normal box model, but can't be absolute since they wouldn't have the marquee behavior. It seems like there should be some sort of relative positioning that is outside of the box model flow that doesn't preserve normal flow spacing that would handle cases like this, but I'm not finding it amid the many drafts of the many revisions of CSS and certainly not among the cargo cult of Google search results.
By request, this is my current non-working CSS at the state of my last experiment:
.itemDiv {
display: inline;
vertical-align: middle;
}
.itemDiv > img {
margin: 10px 10px 10px 30px;
vertical-align: middle;
height: 48px;
width: 48px;
/* border: 1px solid red; */
}
.itemBodyDiv {
display: inline;
vertical-align: middle;
}
.itemDiv span:nth-child(1) {
font-size: small;
clear:left;
vertical-align: top;
color: green;
}
.itemDiv span:nth-child(2) {
font-size: x-large;
vertical-align: middle;
color: white;
}
.itemDiv span:nth-child(3) {
font-size: smaller;
vertical-align: bottom;
color: gray;
}
Any suggestions?
You should wrap the entire scrolling message in a a div with its position set to relative. That way, you're free to absolutely position elements inside of the message absolutely while not breaking the marquee behavior:
.message
{
position: relative;
}
.upper-box
{
position: absolute;
top: 5px;
left: 10px;
}
.lower-box
{
position: absolute;
bottom: 5px;
left: 10px;
}