<table style="float:left;">
<tr>
<td><input id="c11" placeholder="c1,1" class="matr_c" readonly></td>
<td><input id="c12" placeholder="c1,2" class="matr_c" readonly></td>
</tr>
<tr>
<td><input id="c21" placeholder="c2,1" class="matr_c" readonly></td>
<td><input id="c22" placeholder="c2,2" class="matr_c" readonly></td>
</tr>
</table>
I have a code of some matrix in html and css. It looks like this picture now.
http://i.stack.imgur.com/4HJJ3.png
But I want to add some border like this.
http://i.stack.imgur.com/BKvGP.png
you can use pseudo element :before and :after for giving border
table {
position: relative;
}
table:before,
table:after {
content: '';
height: 100%;
position: absolute;
border-color: black;
border-style: solid;
width: 10px;
top: -1px;
}
table:before {
left: -2px;
border-width: 2px 0px 2px 2px;
}
table:after {
right: -2px;
border-width: 2px 2px 2px 0px;
}
<table>
<tr>
<td>
<input id="c11" placeholder="c1,1" class="matr_c" readonly>
</td>
<td>
<input id="c12" placeholder="c1,2" class="matr_c" readonly>
</td>
</tr>
<tr>
<td>
<input id="c21" placeholder="c2,1" class="matr_c" readonly>
</td>
<td>
<input id="c22" placeholder="c2,2" class="matr_c" readonly>
</td>
</tr>
</table>
1- You can add a background image for the table, by these borders, and style the table.
OR:
2- You can put two divs around the table from the left and the right, then give the a background image for each div with one border image, also let the divs have an absolute position.
Related
I'm working on a table and I am trying to make it so if you click anywhere on a row, including blank spaces, then the corresponding checkbox will be selected. I tried putting a <label> before/after the <tr> tag, but that did not seem to work at all. Next, I tried making the contents of each <td> as a label, which works fine, except if you click the blank space on the row between the text then nothing happens.
How can I make the entire row selectable?
body {margin: 0; background-color: #F2F2F2;}
.topbar {
z-index: 10;
position: fixed;
top: 0; left: 0;
width: 100vw; height: 56px;
font-size: x-large;
background-color: #5B7042;
border-bottom: 4px solid #3F5328}
#bottombar {
position: fixed;
width: 100vw; height: 60px;
bottom: 0; left: 0;
padding: 4px;
box-sizing: border-box;
border-top: 2px solid darkgray;
background-color: white;}
#list {
padding: 20px;
margin-top: 60px;
margin-bottom: 60px;
min-height: calc(100vh - 120px);
}
table {border-spacing: 0}
th{
padding: 16px;
color: #5B7042;
border-bottom: 2px solid #5B7042}
td {
padding-top: 6px;
padding-bottom: 6px;
border-bottom: 1px solid lightgray;}
td:not(.name) {text-align: center}
tbody tr:hover{
transform: scale(1.01);
background-color: #E3E3E3}
.pic{
display: inline-block;
width: 25px;
clip-path: circle();
margin-right: 10px;}
<link rel='stylesheet' href='https://classcolonies.com/resources/style.css'>
<div class='topbar'></div>
<form id='list'>
<table>
<colgroup>
<col width='1%'>
<col width='6%'>
<col width='3%'>
<col width='3%'>
<col width='3%'>
<col width='3%'>
<col width='3%'>
</colgroup>
<thead>
<tr>
<th><input type='checkbox'></th>
<th>Student</th>
<th>Seen</th>
<th>Lvl</th>
<th>Pay</th>
<th>Money</th>
<th>Streak</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type='checkbox' id='1'></td>
<td class='name'>
<label for="1">
<img class='pic' src='https://mrdansby.com/resources/pics/1.png'>
<span>John Doe</span>
</label>
</td>
<td><label for="1">1d ago</label></td>
<td><label for="1">15</label></td>
<td><label for="1">$10/hr</label></td>
<td><label for="1">$1300</label></td>
<td><label for="1">🔥32</label></td>
</tr>
<tr>
<td><input type='checkbox' id='2'></td>
<td class='name'>
<label for="2">
<img class='pic' src='https://mrdansby.com/resources/pics/1.png'>
<span>Jane Doe</span>
</label>
</td>
<td><label for="2">3m ago</label></td>
<td><label for="2">21</label></td>
<td><label for="2">$11/hr</label></td>
<td><label for="2">$2560</label></td>
<td><label for="2">🔥15</label></td>
</tr>
</tbody>
</table>
</form>
<div id='bottombar'></div>
It's not possible to use the <label> tag to turn the entire table row into a label. To do this, you need to use JavaScript.
In the code below, a click event is attached to the <tr> elements of a table. If one of them is clicked, the checkbox inside it is toggled. That happens even if you click the spaces between cells.
Also, note that every checkbox has an aria-labelledBy attribute which points to the user name table cell, preserving accessibility. You can apply the same concepts to your table.
document.querySelector('table').addEventListener('click', (e) => {
if (e.target.tagName === 'INPUT') return;
const row = e.target.tagName === 'TR' ? e.target : e.target.parentNode;
const childCheckbox = row.querySelector('input[type="checkbox"]');
childCheckbox.checked = !childCheckbox.checked;
});
td {
padding: 1rem;
border: 1px solid black;
}
<table>
<tr>
<td>
<input type="checkbox" aria-labelledBy="user1">
</td>
<td id="user1">User 1</td>
<td>Info A</td>
<td>Info B</td>
</tr>
<tr>
<td>
<input type="checkbox" aria-labelledBy="user2">
</td>
<td id="user2">User 2</td>
<td>Info A</td>
<td>Info B</td>
</tr>
<table>
The way I was able to get this working was I added a class name to the tr tags and then used some JavaScript. The JavaScript I'm using added the click event listener to the entire row and then from within the click even listener I checked to see if the checkbox was checked. I created a CodeSandbox for this: https://codesandbox.io/s/trusting-architecture-8s13o?file=/src/index.js
I have a html table. In the table on a particular condition i need to strike out the row, the issue is while i am able to overlap the image over normal cells the textboxes come over the strikeout line.
Below code:
<tr class="strikeout" style="/background: transparent url('c:/img/strike.png') 0 50% repeat-x;z-index: 999999999999999999999;position: relative;">
Image :
A background such as you have cannot overlay content.
I'd suggest using a positioned pseudo-element on the td in your selected row*.
*You cannot position absolutely in relation to a tr.
So something like this:
table {
table-layout: fixed;
}
td {
position: relative;
text-align: center;
}
.strikeout td:after {
content: "";
position: absolute;
width: 100%;
height: 6px;
top: 50%;
left: 0;
transform: translateY(-50%);
background: red;
z-index: 1
}
<table border="1" style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr class="strikeout">
<td><input type="text"></td>
<td><button>button</button></td>
<td>
<select name="" id="">
<option value="">Option1</option>
<option value="">Option2</option>
<option value="">Option3</option>
</select>
</td>
</tr>
<tr>
<td>John</td>
<td><button>Button</button></td>
<td>80</td>
</tr>
</table>
I want to create a border around my html component. HTML legend element can be used but i want to use it out of the form.
HTML Legend: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_fieldset
I tried but there is an issue title and border. Below is the jsfiddle for the same.
.temp {
border: 1px solid #999;
margin-top: 20px;
padding: 20px;
position: relative;
}
http://jsfiddle.net/alpeshprajapati/a6a93fg9/1/
How can i achieve output same as legend ? Thanks.
You are pretty much there. The last step to make your markup look like a legend would be to add a background-color to the span which matches the background-color of .temp and the element that contains it. This ensures that the border or .temp does not show behind the text (as background-color is transparent by default).
.temp > span {
background-color: white;
font-size: 21px;
left: 2%;
position: absolute;
top: -15px;
}
.temp {
border: 1px solid #999;
margin-top: 20px;
padding: 20px;
position: relative;
}
<div class="temp">
<span>Permissions</span>
<table class="table cs-table-no-bordered table-striped">
<thead>
<tr>
<th>Modules</th>
<th class="text-center">Edit</th>
<th class="text-center">Delete</th>
<th class="text-center">View</th>
<th class="text-center">All</th>
</tr>
</thead>
<tbody>
<tr>
<td>M1</td>
<td class="text-center">
<input type="checkbox" />
</td>
<td class="text-center">
<input type="checkbox" />
</td>
<td class="text-center">
<input type="checkbox" />
</td>
<td class="text-center">
<input type="checkbox" />
</td>
</tr>
</tbody>
</table>
</div>
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;
}
I'm using a <table> to layout a standard HTML contact form. Let's not discuss the merits of using a table given that HTML should not be about presentation but structure (which is why I believe it's justified anyway).
Nonetheless, here is the markup and CSS I'm using (as-generated by ASP.NET MVC):
<table class="fieldTable">
<tbody>
<tr>
<th><label for="Name">Your name</label></th>
<td><input id="Name" name="Name" type="text" value="" /></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<th><label for="EmailAddress">Your e-mail address</label></th>
<td><input id="EmailAddress" name="EmailAddress" type="text" value="" /></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<th><label for="MessageBody">Message</label></th>
<td><textarea cols="30" id="MessageBody" name="MessageBody" rows="6"></textarea></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td><button type="submit"><span>Send Message</span></button></td>
</tr>
</tbody>
</table>
And my CSS:
.fieldTable th {
text-align: right;
font-weight: normal;
vertical-align: top;
padding: 0.25em;
padding-right: 0.5em; }
.fieldTable input,
.fieldTable textarea,
.fieldTable button {
width: 100%; }
input, textarea, button {
border: 1px solid #999;
padding: 0.5em;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 7px 3px #c4c4c4;
box-shadow: 0px 0px 7px 3px #c4c4c4; }
button { background: #DDD; position: relative; }
button:hover { background: #FFF; }
button:active span { position: relative; top: 2px; left: 2px; }
tr { outline: 1px solid blue; }
td { outline: 1px solid red; }
However it seems to render like this:
Why isn't the <button> element filling the cell horizontally?
I think you might be looking for box-sizing, it is what determines if the margin/padding get added or excluded when calculating the width/height.
box-sizing: border-box;
That should allow you to set a percentage width/height and it will fill without spilling over.
EDIT: It is on button by default (if you inspect the element you will see the browser already adds it). It can be added to your textareas and input fields to get them to match up with your buttons.
If you look at your screen shots. The input fields are going outside of the TDs and the button seems to be the only one really behaving.
David I took a look at your html and created a jsFiddle based on it. I then modified your css to use the box-sizing property you're looking for. Although its applied to other objects on the DOM you might want to extract it into its own class for only the textareas.