i would like to set the checkbox inside a table to middle / center
the dirty way i am using is
<td>
<input type="checkbox" style="text-align:center;" ng-model="x.dedbuffer">
</td>
However, i am looking a way that all the checbox inside the table will be centered. So i am come out with a css
.table td input[type="checkbox"] {
text-align: center;
}
but the css is not working as expected. how to style it in css?
Set it on the input's parent, in this case the td.
Updated showing how-to when targeting only specific cells
table td {
text-align: center;
}
table {
width: 300px;
}
table td {
border: 1px solid;
}
table td.centered {
text-align: center;
}
<table>
<tr>
<td class="centered">
<input type="checkbox" style="text-align:center;" ng-model="x.dedbuffer">
</td>
<td>
Not centered
</td>
</tr>
</table>
If you have more content in same cell, add a wrapper
table {
width: 300px;
}
table td {
border: 1px solid;
text-align: center;
}
table td div {
text-align: left;
}
<table>
<tr>
<td>
<input type="checkbox" style="text-align:center;" ng-model="x.dedbuffer">
<div>
Not centered
</div>
</td>
</tr>
</table>
try this
td input[type="checkbox"] {
width:20px;
height:20px;
display:block;
argin:0px auto;
}
function alerrt() {
alert("I am centered! checkbox");
}
table {
width: 300px;
}
table td {
min-width: 150px;
border: 1px solid;
text-align: center;
padding:5px;
}
table td lable{
margin-right:10px;
}
<table>
<tr>
<td class="centered">
<lable> please check </lable> <input type="checkbox" onclick="alerrt()" style="text-align:center;" ng-model="x.dedbuffer">
</td>
</tr>
</table>
Related
I have a table that fills its container's width. It has three columns. Two columns have a fixed width while the third must expand to fill the remaining width. The width of the table is dynamic.
I can get this to work if a row's height may expand, but I need each row to only have a single line of text. If the text is too long then it must be cut off.
Code + examples: (https://jsfiddle.net/o044tq53/5/)
EDIT: I rewrote the above description and updated the jsfiddle with an example showing what it should look like.
#wrapper {
width:200px;
background:white;
}
table {
border-collapse:collapse;
text-align: left;
width:100%;
margin-bottom:30px;
}
div {
overflow:hidden;
white-space: nowrap;
text-align:left;
}
.td_col_two {
width:100%;
}
.col_one_div {
width:90px;
background: red;
}
.col_two_div {
background: lightblue;
overflow:hidden;
}
.col_three_div {
width:20px;
background: lightgreen;
}
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class = "col_one_div">
Robin
</div>
</td>
<td class = "td_col_two">
<div class = "col_two_div">
nowrap does not work for long text.
</div>
</td>
<td>
<div class = "col_three_div">
x
</div>
</td>
</tr>
</table>
Consider using display:flex and flex:1(flex-grow:1)
check this snippet
#wrapper {
background: white;
display: flex;
flex-direction: column;
border:1px solid black;
}
#wrapper table {
flex: 1;
width: 100%;
}
table,
tr,
td {
border: 1px solid;
}
#table-two div {
word-wrap:break-all;
}
.td_col_two {
width: 100%;
}
.col_one_div {
background: red;
}
.col_two_div {
background: lightblue;
}
.col_three_div {
width: 20px;
background: lightgreen;
}
<div id="wrapper">
<table id="table-one">
<tr>
<td>
<div class="col_one_div">
Robin
</div>
</td>
<td class="td_col_two">
<div class="col_two_div">
Short works
</div>
</td>
<td>
<div class="col_three_div">
x
</div>
</td>
</tr>
</table>
<table id="table-two">
<tr>
<td>
<div class="col_one_div">
Robin
</div>
</td>
<td class="td_col_two">
<div class="col_two_div">
White-space normal also works.
</div>
</td>
<td>
<div class="col_three_div">
x
</div>
</td>
</tr>
</table>
<table id="table-three">
<tr>
<td>
<div class="col_one_div">
Robin
</div>
</td>
<td class="td_col_two">
<div class="col_two_div">
nowrap does not work for long text.
</div>
</td>
<td>
<div class="col_three_div">
x
</div>
</td>
</tr>
</table>
</div>
Hope this helps
I am trying to show a tooltip when the user hovers over the left border of the first td cell. My code is given below (JSFiddle here):
HTML
<table class="cart">
<tr>
<th id="pos">Pos</th>
<th id="name">Product</th>
<th id="price">Price</th>
</tr>
<tbody>
<tr>
<td>
<span>New visual experience!</span>
</td>
<td>
1
</td>
<td>19.99</td>
</tr>
<tr>
<td>
<span>Inject music directly into your ears!</span>
</td>
<td>
2
</td>
<td>19.99</td>
</tr>
</tbody>
</table>
CSS
table tr td{
border: 1px solid blue;
}
.cart { width: 100%; }
td span {
display: none;
color: #000;
text-decoration: none;
padding: 3px;
cursor: arrow;
}
td:hover span {
display: block;
position: absolute;
background-color: #FFF;
border: 1px solid #CCC;
margin: 2px 10px;
cursor: pointer;
}
I have tried many ways, but the tooltip keeps appearing over the entire cell, and not over the left border like I want it. Can someone help please?
I would add an absolutely positioned div with a width the size of the border (or slightly bigger) inside of the first <td> then use that to listen for the hover event.
https://jsfiddle.net/x1c3hxyx/4/
Just cannot imagine how to do a single table cell border black. Just like it is in excel - whole table TD borders are, for example, white, and selected cell has black border.
The obvious solution is to change borders of the nearest cells as well, but the table is dynamically generated ant it takes too much effort to calculate current cell's neighbours. Although, the current cell is known from the "click" event, so it would be great to achieve that styling it.
Tried to put the div inside but cannot align it without specifying cell and div sizes exactly in pixels, that is not portable.
Please help!
Sorry, thought it's obvious without code. Actually, I don't have a code that's working, but currently I'm trying that (wrote just a quick sample, sorry):
https://jsfiddle.net/a549b6t1/10/
<table>
<tr>
<td>
<div>
<input type="text">
</div>
</td>
<td>
<div>
<input type="text">
</div>
</td>
<td>
<div>
<input type="text">
</div>
</td>
</tr>
<tr>
<td>
<div>
<input type="text">
</div>
</td>
<td>
<div>
<input type="text">
</div>
</td>
<td>
<div>
<input type="text">
</div>
</td>
</tr>
<tr>
<td>
<div>
<input type="text">
</div>
</td>
<td id="selected">
<div>
<input type="text">
</div>
</td>
<td>
<div>
<input type="text">
</div>
</td>
</tr> <tr>
<td>
<div>
<input type="text">
</div>
</td>
<td> <div>
<input type="text">
</div>
</td>
<td> <div>
<input type="text">
</div>
</td>
</tr>
<tr>
<td>
<div>
<input type="text">
</div>
</td>
<td>
<div>
<input type="text">
</div>
</td>
<td>
<div>
<input type="text">
</div>
</td>
</tr>
</table>
And css (dunno why, this site asks me to paste the code here)
table
{
border-collapse: separate;
border-spacing: 0;
padding: 0;
border: 0px solid #ffffff;
margin: 1em;
}
td
{
font-size: 1rem;
empty-cells: show;
border: 1px solid rgba(230,222,255,1);
padding: 0;
}
td#selected
{
font-size: 1rem;
empty-cells: show;
border: 1px solid rgba(0,0,0,1);
padding: 0;
}
tr:nth-child(odd)
{
padding: 0px;
margin: 0;
background: #efedee;
border: 0px solid transparent;
overflow: visible;
}
tr:nth-child(even)
{
padding: 0px;
margin: 0;
background: #f6f4f5;
border: 0px solid transparent;
overflow: visible;
}
input[type=text]
{
background: rgba(255,255,255,0);
border: 0px solid rgba(255,255,255,1);
margin: 0;
padding: 5px;
height: 1rem;
}
Hope it will help to understand the problem
This is how I want it to llok like
This is how it really looks like now
Solution provided by Shaggy : https://jsfiddle.net/a549b6t1/14/
Thank you!
Adjusting the adjacent cell borders is still going to cause you a problem as, on the cell above, for example, you'll have the left and right borders cutting in to the bottom border slightly as illustrated in this snippet:
div{
border:10px solid;
border-color:#000 #f00 #090 #009;
height:100px;
width:100px;
}
<div></div>
Instead, what you're going to need to do is collapse the borders of your table and then, for the active cells, use an absolutely positioned pseudo element to create the highlighted border, setting all 4 positioning values to the negative pixel value of the size of your border.
Here's a quick example using :hover to illustrate the principle:
*{box-sizing:border-box;}
table{
border-collapse:collapse;
}
td{
border:5px solid #ccc;
background:#eee;
height:100px;
position:relative;
width:100px;
}
td:hover::before{
border:5px solid #000;
bottom:-5px;
content:"";
left:-5px;
position:absolute;
right:-5px;
top:-5px;
z-index:1;
}
div{
position:relative;
z-index:2;
}
div,input{
width:100%;
}
<table>
<tbody>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td><div><input></div></td>
</tr>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td><div><input></div></td>
</tr>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td><div><input></div></td>
</tr>
</tbody>
</table>
As an alternative, rather than giving each individual cell an initial border, you could use border-spacing instead, like so:
*{box-sizing:border-box;}
table{
background:#ccc;
border-spacing:5px;
}
td{
background:#eee;
height:100px;
position:relative;
width:100px;
}
td:hover::before{
border:5px solid #000;
bottom:-5px;
content:"";
left:-5px;
position:absolute;
right:-5px;
top:-5px;
}
div{
position:relative;
z-index:2;
}
div,input{width:100%;}
<table>
<tbody>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td><div><input></div></td>
</tr>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td><div><input></div></td>
</tr>
<tr>
<td><div><input></div></td>
<td><div><input></div></td>
<td><div><input></div></td>
</tr>
</tbody>
</table>
You can use jquery to get current cell and then change its class to other class that defines visible borders
jquery :
$("#cell").click(function() {
$(this).toggleClass('not-selected selected');
});
css :
.not-selected{
border: 0px;
}
.selected{
border: 1px solid black;
}
How can I display my image and the table on the same level? This is really depressing me because I can't get "inline-block" to work. :(
<p id="play">
hey
</p>
<div id="menu">
<table>
<tr>
<td>Models</td>
</tr>
<tr>
<td>Cars</td>
</tr>
<tr>
<td>Modern Houses</td>
</tr>
<tr>
<td>Vacation Spots</td>
</tr>
<tr>
<td>Sports and Outdoors</td>
</tr>
<tr>
<td>Books</td>
</tr>
<tr>
<td>Abandoned Houses</td>
</tr>
<tr>
<td>Summer Wear</td>
</tr>
<tr>
<td>Makeups</td>
</tr>
<tr>
<td id="site">Site Info</td>
</tr>
</table>
</div>
<img src="C:\Users\Elexie\Documents\Downloads\faki2.jpg"/>
body {
background: #181818;
margin: 0;
padding: 0;
}
/* set body display to inline-table*/
#play {
background: black;
color: white;
margin: 0;
padding: 0;
height: 35px;
}
table,td {
color: white;
border: 1px solid white;
border-collapse: collapse;
width: 160px;
padding: 10px;
font-family: ;
}
table {
}
#site {
height: 350px;
}
img {
float: right;
}
I changed the picture, but it's of similar size
http://jsfiddle.net/w6d5g/
In your css code:
table{
float:left;
}
Should do the trick.
Read more: http://www.w3schools.com/css/css_float.asp
Check this fiddle: http://jsfiddle.net/Mohamed_nabil/F8MKp/
/*******Added style******/
img
{
/*165px is your Menu width with borders*/
max-width: calc(100% - 165px);
/*For cross browser*/
-webkit-max-width: calc(100% - 165px);
-moz-max-width: calc(100% - 165px);
-o-max-width: calc(100% - 165px);
-ms-max-width: calc(100% - 165px);
display: inline-block;
vertical-align: top;/* Can be middle, bottom */
}
#menu{
display: inline-block;
}
Firstly, wrap your image tag with a div. Name this div anything you want. Let's name it: "image-test".
<div class="image-test">
<img src="(URL for IMAGE)">
</div>
Next, let's say you want your table to take up 50% of the width and your image to take up the other 50%. We are also going to float these div elements so they are not in the flow of the document.
#menu{
float:left;
width:50%;
}
.image-test{
float:left;
width:50%;
}
You'll notice your image is larger than the containing div, so let's set a max width on all images to avoid future problems.
img {
max-width:100%;
}
I have a checkbox list that I need to make horizontal. The checkboxes and labels are all appearing on the same row but the spacing between them is very far apart, is there a way to shrink each cell to be only as large as the checkbox and label inside of it? JSFiddle here: http://jsfiddle.net/yrcZ2/
<table id="form_3D7" class="scfCheckBoxList">
<tbody>
<tr>
<td>
<input id="form_3D7" type="checkbox" value="One" name="form_3D7">
<label for="form_3D7">One</label>
</td>
<td>
<input id="form_3D8" type="checkbox" value="Two" name="form_3D8">
<label for="form_387">Two</label>
</td>
<td>
<input id="form_3D9" type="checkbox" value="Three" name="form_3D9">
<label for="form_3D9">Three</label>
</td>
</tr>
</tbody>
</table>
CSS:
.scfCheckBoxList {
margin: 0;
width: 100%;
}
tbody {
display: table-row-group;
vertical-align: middle;
}
tr {
display: table-row;
vertical-align: inherit;
}
.scfCheckBoxList td {
vertical-align: top;
}
.scfCheckBoxList input {
float: left;
width: 30px;
}
.scfCheckBoxList label {
clear: none;
font-weight: normal;
padding: 0;
width: 68%;
}
.scfForm input {
box-sizing: border-box;
}
I've inherited this code and trying to shrink the table cells to only be as large as the text inside of them. Any help greatly appreciated.