I am drawing a table with highly customized styles for its cells. Unfortunately, I discovered that increasing the border of the 6th cell to 4px creates a rendering problem as displayed in this screenshot:
this is the CSS for the rule that introduced the problem:
tr.item_cnnc td:first-child + td + td + td + td + td {
border: 4px solid black;
}
I just wonder why the border on the 3rd row is not displayed correctly. Any suggestions?
EDIT: pasting the HTML of the affected row:
<tr class="item item_cnnc">
<td class="itemid item_kritisch">DP3</td>
<td class=" item_kritisch">
put text here
</td>
<td class="option item_kritisch">
<input type="checkbox" name="Item_DP3_relevant" value="1" >
</td>
<td class="option">
<input type="text" size="1" name="Item_DP3_vw_pij" >
</td>
<td class="option item_kritisch">
<input type="text" size="1" name="Item_DP3_pij" >
</td>
<td class="option">
<input type="checkbox" name="Item_DP3_kr" value="true" >
</td>
<td class=" info parent">
<div id="popup_DP3" class="dropdown">put info here</div>
<a href="#info_DP3" id="info_DP3">
<img src="/images/Information_icon_small.png" alt="Info" width="15" height="15" border="0" class="x"/></a>
</td>
</tr>
It could get messy having different sized borders on table cells, I wouldn't recommend it.
Why not nest the checkbox inside a div with a black border, and height and width of 100%?
That might be a more consistent way of gettign the result you want.
Related
This is what I have currently:
This is what I'm hoping for:
I tried tables and width percentages, but I just can't get it right. E.g. this is what I ended up with when I tried this:
<table class="toptable">
<tr><td class="cl1">+1</td>
<td class="cl2">
<div class="field"><input id="email_phone" class="text" type="text" name="email_phone" maxlength="128" placeholder="phone number or email" tabindex="1">
<span class="form_label">(+01 123 4567890)</span>
</div>
</td>
</tr>
</table>
```
.cl1{
width:20%;
display:inline;
}
.cl2{
width:80%;
display:inline;
}
.toptable {
padding:5px;
width:200px;
}
Instead of being side to side, the '+1' shoves to the top of it..
Appreciate any help/pointers.
Have you tried using 'Col-Md-X' classes in your <td> tags?
Similar to percentages you can divide your space into 12 sections.
Replacing your cl1 and cl2 classes with class="col-md-3" and class="col-md-9" will give your prefix section 1/4 of the space, and the number section the remaining 3/4 space.
You can also change the numbers in col-md to divide your table row in different ways.
<table class="toptable">
<tr>
<td class="col-md-3">+1</td>
<td class="col-md-9">
<div class="field">
<input id="email_phone" class="text" type="text" name="email_phone" maxlength="128" placeholder="phone number or email" tabindex="1">
<span class="form_label">(+01 123 4567890)</span>
</div>
</td>
</tr>
</table>
If you want to achieve it using table you can do something like this:
<tr>
<td> <span>+1</span> </td> //set it like 20%
<td> <input ...> </td> //60%
<td></td> //20%
</tr>
or use div and use positionig of elements depending on look you want to achieve
like:
<div><span>+1</span></div> //set width to 20%
<div><input ...></div> // set width to 60%
//center input nad make divs to float left
I have a table consisting of a lot of input elements inside td elements.
<table>
<tbody>
<td class="first">
<div>
<input type="text" />
</div>
</td>
</tbody>
</table>
The width of the input elements should be 20px. The width of the table is set to 100%. The input element in the first td should only have a min-width set so it will strech out (since the table has 100% width). I want the other inputs to have a fixed width (20px). When I do this the td elements has a much larger width than the input elements:
https://jsfiddle.net/cbzuwyrg/
Is it possible to make the td elements the same width as the input elements without setting the same width in css?
This fiddle shows what I want to achieve, but without having to set the width of the td to 20px:
https://jsfiddle.net/cbzuwyrg/1/
I guess this will work with you too .
Edit : i edited the code so all tds be the same size as the input .
table {
width:100%;
border-collapse: collapse;
}
td.first{
width:auto;
border: 1px solid #000;
}
input[type="text"] {
width: 100%;
box-sizing: border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing: border-box;
}
<table>
<tbody>
<td class="first">
<div>
<input type="text" size="2">
</div>
</td>
<td class="first">
<div>
<input type="text" size="7">
</div>
</td>
<td class="first">
<div>
<input type="text" size="">
</div>
</td>
<td class="first">
<div>
<input type="text" placeholder="last" size="" >
</div>
</td>
</tbody>
</table>
The code is html and CSS no JavaScript were used .
<table>
<tbody>
<td class="first">
<div>
<input type="text" />
</div>
</td>
<td>
<div style="width:8px">
<input type="text" />
</div>
</td>
<td>
<div style="width:8px">
<input type="text" />
</div>
</td>
<td>
<div style="width:8px">
<input type="text" />
</div>
</td>
</tbody>
</table>
Add the width size to your div's
I think that the scss you are writing can be more useful if you nest it properly, this works fine just adding a calc and nesting the scss code. I hope it can helps.
In this case the td's with 20px of width use a class that stablish that width, and the inputs have a calc because when you use 100% width they use the whole space until next input.
Sass:
table {
width:100%;
border-collapse: collapse;
td {
border: 1px solid #000;
//display: inline-block;
width: 100%;
div {
input {
width: calc(100% - 4px) ;
&.td20 {
width: 20px;
}
}
}
}
}
HTML:
<table>
<tbody>
<td class="first">
<div>
<input type="text" />
</div>
</td>
<td>
<div>
<input type="text" class="td20"/>
</div>
</td>
<td>
<div>
<input type="text" class="td20" />
</div>
</td>
<td>
<div>
<input type="text" class="td20" />
</div>
</td>
</tbody>
</table>
Here you can see it working: https://jsfiddle.net/javierdp/adtj2t3o/8/
I have radio buttons arranged in a table
<input type="radio" class="containerRadio">
In Chrome it is possible to select radio buttons – but not able to unselect them. [Which I understand as a standard behavior]
In IE it is not allowing me to select the radio buttons at all. [Tested in IE9].
I tried various approaches like giving name and value - but didn't get it resolved. Any idea how we can fix it?
<html>
<table id="tblValidContainers" border="0" cellpadding="0" cellspacing="0" style="width: 200px;
background-color: #E5DBE2; margin-left: 80px;">
<thead>
<tr>
<td class="Heading3" style="width: 120px;" align="center">
Container ID
</td>
<td class="Heading3" style="width: 80px;" align="center">
Receive
</td>
</tr>
</thead>
<tbody>
<tr class="Normal">
<td align="center" style="padding-left: 5px">
<div class="divContainerIDWrapper" name="a" value = "a"> ~~3957515 </div>
</td>
<td align="center" style="padding-left: 5px">
<input type="radio" class="containerRadio">
</td>
</tr>
<tr class="Normal">
<td align="center" style="padding-left: 5px">
<div class="divContainerIDWrapper" name="b" value = "c"> ~~3957514 </div>
</td>
<td align="center" style="padding-left: 5px">
<input type="radio" class="containerRadio">
</td>
</tr>
<tr class="Normal">
<td align="center" style="padding-left: 5px">
<div class="divContainerIDWrapper"> ~~3957513 </div>
</td>
<td align="center" style="padding-left: 5px">
<input type="radio" class="containerRadio">
</td>
</tr>
<tr class="Normal">
<td align="center" style="padding-left: 5px">
<div class="divContainerIDWrapper"> ~~3957512 </div>
</td>
<td align="center" style="padding-left: 5px">
<input type="radio" class="containerRadio">
</td>
</tr>
<tr class="Normal">
<td align="center" style="padding-left: 5px">
<div class="divContainerIDWrapper"> ~~3957511 </div>
</td>
<td align="center" style="padding-left: 5px">
<input type="radio" class="containerRadio">
</td>
</tr>
<tr class="Normal">
<td align="center" style="padding-left: 5px">
<div class="divContainerIDWrapper"> ~~3957510 </div>
</td>
<td align="center" style="padding-left: 5px">
<input type="radio" class="containerRadio">
</td>
</tr>
<tr class="Normal">
<td align="center" style="padding-left: 5px">
<div class="divContainerIDWrapper"> ~~3957509 </div>
</td>
<td align="center" style="padding-left: 5px">
<input type="radio" class="containerRadio">
</td>
</tr>
</tbody>
</table>
</html>
So what you're trying to do is a checkbox that has a look and feel as a radio-button am I wrong?
If so, the checkbox four on this page might be what you're looking for, with a different CSS.
And, here's the whole demo of all checkboxes he has made.
I added a possible example of this other page I found. Look at this JSFiddle.
HTML
<h3>CSS3 Custom Checkbox</h3>
<div class="checkbox">
<input type="checkbox" value="check1" name="check" id="check1">
<label for="check1">Checkbox No. 1</label>
<br>
<input type="checkbox" value="check2" name="check" id="check2">
<label for="check2">Checkbox No. 2</label>
</div>
CSS
label {
cursor: pointer;
display: inline-block;
font-size: 13px;
margin-right: 15px;
padding-left: 25px;
position: relative;
}
.wrapper {
margin: 50px auto;
width: 500px;
}
input[type="radio"], input[type="checkbox"] {
display: none;
}
label:before {
background-color: #aaa;
bottom: 1px;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.3) inset, 0 1px 0 0 rgba(255, 255, 255, 0.8);
content: "";
display: inline-block;
height: 16px;
left: 0;
margin-right: 10px;
position: absolute;
width: 16px;
}
.checkbox label:before {
border-radius: 8px;
}
input[type="checkbox"]:checked + label:before {
color: #f3f3f3;
content: "•";
font-size: 30px;
line-height: 18px;
text-align: center;
}
You cannot unselect radio buttons. That's because they're used if you want the user to select either option1 or option2 or option3 but prohibit selecting multiple values or leaving it empty (e.g. in case of selecting a Gender).
See Specification at w3c:
when one is switched "on", all others with the same name are switched "off".
To unselect "male" if "female" is selected, you have to tell the browser that the radios belong to the same group. That's done by adding the name-attribute:
<input checked type="radio" name="sex" value="male">
<input type="radio" name="sex" value="female">
if you wish to give the user the possibility of boxes he can check/uncheck as he likes (e.g. "want to receive our newsletter?"), you should use type="checkbox".
Radio buttons get their name from the old-style car radios where you physically pushed one of a group of buttons to change the station. You can only listen to one station at a time, so only one radio button can be pressed at a time.
"input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices" [see Radio Buttons]
Following is what I did to resolve the issue.
Added name property to all the radio buttons
Made sure that the names are distinct for each radio button. [Since I need to select multiple radio buttons at once, based on the requirement - though the intention of "radio" button is not to do so]
Wikipedia says:
A radio button or option button is a graphical control element that allows the user to choose only one of a predefined set of options, an exclusive or.
Etymology
Radio buttons were named after the physical buttons used on older car radios to select preset stations – when one of the buttons was pressed, other buttons would pop out, leaving the pressed button the only button in the "pushed in" position.
Everything is correct you just need to add name attribute to all radio buttons. All of them should have the same name.
Example:
<input type="radio" name="one" class="containerRadio">
<input type="radio" name="one" class="containerRadio">
Radio button are meant to provide functionality of selecting only one at a time. If you want to select multiple, you have to use checkbox.
Example:
<input type="checkbox" name="two" class="containercheckbox">
<input type="checkbox" name="two" class="containercheckbox">
I have a basic CSS/html question about using html/CSS. I thought this was fairly basic and obvious, however it is not working as intended.
In this basic image, I would want the Labels to be to the right of Expertise
(creating a registration page where the user selects their Expertise)
I would believe this is basically
<tr>
<td>Expertise</td>
<input type="checkbox" style="vertical-align: left; margin: 12px;"> Label </input><br>
<input type="checkbox" style="vertical-align: left; margin: 12px;"> Label 2 </input>
</tr>
however this is not working as intended.
First of all your markup is invalid, table element can only have elements which are meant for table as their child elements i.e tbody, thead, th, tr, td etc, and no other elements, instead you can place those checkboxes inside td
Secondly input tag doesn't have any explicit closing tag, you need to self close it, else leave it without closing just like <br>
Third - Use label tag instead of having stray text besides checkbox
Demo
The right way
<table>
<tr>
<td class="valign">
Expertise
</td>
<td>
<input type="checkbox" style="vertical-align: left; margin: 12px;" />
<label>Label</label><br />
<input type="checkbox" style="vertical-align: left; margin: 12px;" />
<label>Labe2</label>
</td>
</tr>
</table>
CSS
.valign {
vertical-align: top;
}
Since you are already using tables, just place the input tags into another td tag like this:
<tr>
<td>Expertise</td>
<td>
<input type="checkbox" style="vertical-align: left; margin: 12px;"> Label </input><br>
<input type="checkbox" style="vertical-align: left; margin: 12px;"> Label 2 </input>
</td>
</tr>
This will make the checkboxes appear to the right of "Expertise".
I have one row consisting of two tds. TD1 contains two texts(txt1 and txt2). txt2 in TD1 must be in line with TD2. Here's my code :
<tr>
<td width="220">
<span class="b">TB From:</span>
<span style="position: relative; left : 20px;" id="lblTBHoriz" class="b"><br>
<span style="padding-left: 1.5px"> TBN:</span>
</span>
</td>
<td>
<pre></pre>
<input type="text" id="tBFrom" name="tBFrom"
value="" size="20" maxlength="16"
onkeypress="return isNumberKey(event);" onchange="validate(this);" >
</input>
</td>
</tr>
The problem is TBN: and the input box in the other td must be in line and in mozilla its working perfectly. But in IE, the input box is going up the text TBN: and getting aligned with TB From: text. What can i do to fix this one ? Kindly help .
In case the <input> has to be at the bottom each time you can add a class to the td tag and add some CSS to it:
td.your-class
{
vertical-align:bottom;
}
Tables are supposed to have tabular data. It's not recommended to use them for lay-out.
You could use divtags instead.
<div>TB From:</div>
<div><label>TBN:</label><input type="text" vlaue="" /></div>
The divtags you can style however you like.
<tr>
<td colspan="2" width="220">
<span class="b">TB From:</span>
<span style="position: relative; left : 20px;" id="lblTBHoriz" class="b"><br>
<span style="padding-left: 1.5px"> TBN:</span>
</span>
</td>
<td colspan="2">
<pre></pre>
<br/>
<input type="text" id="tBFrom" name="tBFrom"
value="" size="20" maxlength="16"
onkeypress="return isNumberKey(event);" onchange="validate(this);" >
</input>
</td>
</tr>
http://jsfiddle.net/dolours/zvMKH/335/