Can I prevent the user from highlighting one column in a table?
I have a 2-column table. Users will want to copy the content in the second column, but not the first column.
<table>
<tr>
<td>col1</td>
<td>line1</td>
</tr>
<tr>
<td>col1</td>
<td>line2</td>
</tr>
<tr>
<td>col1</td>
<td>line3</td>
</tr>
</table>
Here's a JSFiddle with an example:
http://jsfiddle.net/vepq0e29/
When the user copies and pastes, I want the output to just be:
line1
line2
line3
...
line7
I don't want col1 to show up or be highlighted when the user selects the table.
How can I make it so that users can only select and copy content from the second column?
Thanks!
You can use pseudo-elements to show the text. Text from pseudo-elements is never copied at the moment (not sure, if it'll be changed sometime).
http://jsfiddle.net/vepq0e29/3/
td:first-child:after {
content: attr(aria-label);
}
<table>
<tr>
<td aria-label="col1"></td>
<td>line1</td>
</tr>
<tr>
<td aria-label="col1"></td>
<td>line2</td>
</tr>
<tr>
<td aria-label="col1"></td>
<td>line3</td>
</tr>
<tr>
<td aria-label="col1"></td>
<td>line4</td>
</tr>
<tr>
<td aria-label="col1"></td>
<td>line5</td>
</tr>
<tr>
<td aria-label="col1"></td>
<td>line6</td>
</tr>
<tr>
<td aria-label="col1"></td>
<td>line7</td>
</tr>
</table>
tr td:first-child {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none; /* Likely future */
}
The user can't select the first column as long as he is not viewing the html source code.
http://jsfiddle.net/vepq0e29/1/
Please checkout this example, try yourself use Run Cde Snippet below and just select all rows in single column and then copy and paste in any editor and see results :)
Hope this will help
div.table {
display: block;
width: 100%;
}
div.td-outer {
width: 48%;
display: inline-block;
border: 1px solid #00aaff;
text-align: center;
vertical-align: middle;
height: 100%;
}
div.tr {
display: block;
text-align: center;
height: 140px;
vertical-align: middle;
}
div.td-inner {
display: inline-block;
border: 1px solid #ccc;
width: 90%;
vertical-align: middle;
height: 95%;
margin: 3px;
}
div.td-inner span {
height: 95%;
vertical-align: middle;
}
<div class="table">
<div class="td-outer">
<div class="tr">
<div class="td-inner"> <span>
col1
</span>
</div>
</div>
<div class="tr">
<div class="td-inner"> <span>
col1
</span>
</div>
</div>
</div>
<div class="td-outer">
<div class="tr">
<div class="td-inner"> <span>
line1
</span>
</div>
</div>
<div class="tr">
<div class="td-inner"> <span>
line2
</span>
</div>
</div>
</div>
</div>
Related
Made a table with first column fixed using this fiddle link http://jsfiddle.net/Yw679/6/ need a vertical text to left of fixed column(the text also vertical text also remains fixed like first column).
Difference between fiddle link and my expected output
1. the text 'co1' and 'co2' is vertically aligned
2. the vertical text should be fixed like the first column is.
fiddle code
1.HTML:
<div style="width:400px">
<table class="table1">
<tr>
<thead>
<th> make me fixed</th>
</thead>
</tr>
<tr>
<td>value number 1</td>
</tr>
</table>
<div class="table2">
<table>
<tr>
<thead>
<th>make me scrollable eeeeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeee eeeeeeeeeeeeeeeeee eeeeeeee eeeeeeeeeee eeeeeeeeeeeeee eeeeeeeeee eeeeeeee</th>
</thead>
</tr>
<tr>
<td> value number 2 </td>
</tr>
</table>
</div>
</div>
2.CSS
th,td {
padding: 5px;
border: 1px solid #000;
white-space: nowrap;
}
.table1 {
float: left;
}
.table2 {
width: 200px;
overflow: auto;
}
Here's the expected output
Something like this?
th,td {
padding: 5px;
border: 1px solid #000;
white-space: nowrap;
}
.table1 {
float: left;
}
.table2 {
width: 200px;
overflow: auto;
}
.text-container {
display: inline;
float: left;
width: 1rem;
}
.text {
text-align: center;
width: 0;
font-size: 10px;
word-wrap: break-word;
line-height: .5rem;
padding: 2px;
}
<div class="text-container">
<div class="text">CO1</div>
<div class="text">CO2</div>
</div>
<div style="width:400px">
<table class="table1">
<tr>
<thead>
<th> make me fixed</th>
</thead>
</tr>
<tr>
<td>value number 1</td>
</tr>
</table>
<div class="table2">
<table>
<tr>
<thead>
<th>make me scrollable eeeeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeeee eeeeeeeee eeeeeeeeeeeeeeeeee eeeeeeee eeeeeeeeeee eeeeeeeeeeeeee eeeeeeeeee eeeeeeee</th>
</thead>
</tr>
<tr>
<td> value number 2 </td>
</tr>
</table>
</div>
</div>
I want to show different images on different list's <td> element, whenever mouse is hovered on it. I am using Bootstrap to develop my page. I tried searching here, but no definite answers was found.
Code is here. Any help please:
<section>
<div class="container">
<div class="head-list" id="list">
<h3>OUR PRESTIGIOUS GOLD MEDALISTS</h3>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 black text-center">
<table class="table table-responsive">
<thead class="table" style="background-color:gold; color: black">
<tr>
<th width="70">SR.#</th>
<th width="255">STUDENT'S NAME</th>
<th width="180">POSITION</th>
<th width="120">EXAM</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Text 1 on which I want an img to hover when mouse is pointed here</td>
<td>simple txt 1a</td>
<td>1990</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Text 2 on which I want an img to hover when mouse is pointed here</td>
<td>Simple txt 2a</td>
<td>1995</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Text 3 on which I want an img to hover when mouse is pointed here</td>
<td>Simple txt 3a</td>
<td>1998</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
</section>
<div class="clearfix"> </div>
And relevant css for the above code is:
<style>
.head-list h3{
font-size: 3.2em;
color: #2A72D3;
font-family: 'Lato', sans-serif;
text-align: center;
text-transform: capitalize;
margin-bottom:30px;
letter-spacing:2.2px;
}
tbody {color: white;
font-weight: bold;
font-size: 1.1em;
font-family: 'Montserrat Alternates', sans-serif;
}
table, th, td { /*this is the relavant css styling for the above table in
question*/
text-align: center;
padding: 2px;
border: 1px solid gold;
}
table#t01 { /*This styling is for another table i created but on the same
page*/
text-align: left;
padding: 1px;
background-color: #3B3939;
border: 1px solid black;
}
</style>
I found the solution too. added some more styles in css and then displayed it in lists.
So in css i added these:
.hover_img a {
position: relative;
color: antiquewhite;
}
.hover_img a span {
position:absolute;
left: 80%;
top: 10px;
display:none; z-index: 99;
}
.hover_img a:hover span {
display: block;
width: 200px;
}
And in html portion i added this in every <td> element of my ordered lists:
<td> <div class="hover_img">
<a>My text<span><img src="images/f61.jpg" alt="image" height="100">
</span></a>
</div> </td>
So whenever cursor hover over "My text", an image is displayed. I adjusted image's position according to my layout. It is working fine in responsive view also.
I would appreciate it if you could suggest any optimization in regard of this code, page loading, server response, etc.
I need to align the three boxes in a horizontal position. Also I need to add toggle color of the border of the second box. I am pasting my codes here.
My HTML code is
Unordered List
This is a simple list
First Item (bold)
Second Item
Third Item
Last Item (underlined)
<div class="box2">
<h2>Button Jquery Demo</h2>
<p>The background of this box should be set to white on document.ready()</p>
<p>Clicking the button below will alternate the color of the border of this box to red and back to default on on each click.</p>
Toggle Color
</div>
<div class="box3">
<h2>Table Example</h2>
<p>Table rows should include a hover state</p>
<table>
<thead>
<div id="col3">
<table summary="" border="1" cellspacing="0" cellpadding="3">
<tr>
<th>Driver</th>
<th>Hometown</th>
<th>Car</th>
</tr>
</thead>
<tbody>
<tr>
<td>John S.</td>
<td>Lincoln, NE</td>
<td>55</td>
</tr>
<tr>
<td>Jane D.</td>
<td>Omaha, NE</td>
<td>24</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Mike J.</td>
<td>Albany, NY</td>
<td>1</td>
</tr>
</tfoot>
</table>
</div>
My CSS code is
.box1 {
background-color: #4b4244;
width: 300px;
padding: 25px;
margin: 25px;
height: 240px ;
border-radius: 25px;
display:inline-block;
}
.box2 {
margin: auto;
background-color:white;
width: 300px;
padding: 25px;
height: 240px;
border-radius: 25px;
display: inline-block;
}
.box3 {
position: absolute;
right: 0px;
background-color: #4b4244;
width: 300px;
padding: 25px;
margin: 25px;
height: 240px ;
border-radius: 25px;
display: inline-block;
}
Use float:left to align your boxes:
jsFiddle
EDIT:
I suspect the floating boxes are throwing your footer off. In that case, wrap your boxes in a containing tag (e.g. main) and give it this :after content:
main:after{
content:"";
display:block;
clear:both;
}
updated fiddle
try with this below code it may help you and look it into full screen
$(document).ready(function(){
$("a.toggleColor").click(function(){
$(".box2").toggleClass("border");
});
});
div.box1,.box2,.box3{
float : left;
height: 240px ;
width: 300px;
padding: 25px;
background-color: #4b4244;
margin : 25px;
border-radius: 25px;
}
.box2 {
background-color:white !important;
border : 1px #4b4244 solid;
}
.border{
border : 1px red solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box1">
<h2>Unordered List</h2>
<p>This is a simple list</p>
<ul>
<li>First Item (bold)</li>
<li>Second Item</li>
<li>Third Item</li>
<li>Last Item (underlined)</li>
</ul>
</div>
<div class="box2">
<h2>Button Jquery Demo</h2>
<p>The background of this box should be set to white on document.ready()</p>
<p>Clicking the button below will alternate the color of the border of this box to red and back to default on on each click.</p>
Toggle Color
</div>
<div class="box3">
<h2>Table Example</h2>
<p>Table rows should include a hover state</p>
<div id="col3" >
<table summary="" border="1" cellspacing="0" cellpadding="3">
<thead>
<tr>
<th>Driver</th>
<th>Hometown</th>
<th>Car</th>
</tr>
</thead>
<tbody>
<tr>
<td>John S.</td>
<td>Lincoln, NE</td>
<td>55</td>
</tr>
<tr>
<td>Jane D.</td>
<td>Omaha, NE</td>
<td>24</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Mike J.</td>
<td>Albany, NY</td>
<td>1</td>
</tr>
</tfoot>
</table>
</div>
Here's my code:
<div id="togglemenu2" class="sidetogglemenu">
<table class="hoverTable">
<tbody>
<tr>
<td colspan="2"> Example </td>
</tr>
<tr>
<td colspan="2">
<img class="gpablogo" src="http://s2.postimg.org/yb2yzb5fd/gpab.png">
<div class="gpab1">
<p>1</p>
</div>
<div class="gpab2">
<p>2</p>
</div>
<div class="gpab3">
<p>3</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
How can I move numbers 1,2,3 between G and P and Ab? I need a CSS code to move those numbers look like this:
G1 P2 AB3
Thanks in advance
Here is one way of realizing your layout. Create a wrapping element .logowrap around the image and the labels, and specify position: relative.
You can then use absolute positioning to place the labels where you need them.
.logowrap {
display: inline-block;
border: 1px dotted blue;
position: relative;
}
.logowrap img {
vertical-align: top;
}
.logowrap .gpab {
display: inline-block;
position: absolute;
top: 50%;
font-size: 2.00em;
}
.gpab.n1 {
left: 25%;
}
.gpab.n2 {
left: 50%;
}
.gpab.n3 {
left: 90%;
}
<div id="togglemenu2" class="sidetogglemenu">
<table class="hoverTable">
<tbody>
<tr>
<td>Example</td>
</tr>
<tr>
<td>
<div class="logowrap">
<img class="gpablogo" src="http://s2.postimg.org/yb2yzb5fd/gpab.png">
<div class="gpab n1">1</div>
<div class="gpab n2">2</div>
<div class="gpab n3">3</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
inside td I am taking a table, but somehow table is not taking the td full height. can any one help me to fix this issue.
html for table:
<table style="height: auto">
<tr>
<td style="background-color: red">
<table style="background-color: orange">
<tr>
<td>
<div style="height: 20px; width: 2px; background-color: black; vertical-align: top"></div>
<div style="height: 2px; width: 20px; background-color: black; vertical-align: bottom"></div>
</td>
</tr>
<tr style="height: 100%;">
<td>
<div style="height: 100%; width: 2px; background-color: black;"></div>
</td>
</tr>
</table>
</td>
<td style="background-color: yellow">
<table>
<tr>
<td>Description</td>
</tr>
<tr>
<td>Expression</td>
</tr>
</table>
</td>
</tr>
</table>
You can't force an object to take up 100% of the height of a cell without writing some JavaScript that will figure out the height of the cell and resize the table programatically.
I'm not really sure what your goal is with this, but you can achieve the look you seem to want by setting the background on the td and set a border to get the red outline.
<table style="height: auto">
<tr>
<td style="background-color: orange; border: solid red 1px">
<table>
<tr>
<td>
<div style="height: 20px; width: 2px; background-color: black; vertical-align: top"></div>
<div style="height: 2px; width: 20px; background-color: black; vertical-align: bottom"></div>
</td>
</tr>
<tr style="height: 100%;">
<td>
<div style="height: 100%; width: 2px; background-color: black;"></div>
</td>
</tr>
</table>
</td>
<td style="background-color: yellow">
<table>
<tr>
<td>Description</td>
</tr>
<tr>
<td>Expression</td>
</tr>
</table>
</td>
</tr>
</table>