I am having html table with conteneditable. Now when I am pasting data into HTML table then table creates rows instead of columns. Please take a look at my code. I am not able to get what javascript I should use to complete the task.
<table style="width:100%" onpaste="myFunction()" contenteditable>
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
</tr>
<tr>
<td>44</td>
<td>55</td>
<td>66</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script>
function myFunction() {
alert("pasted")
}
</script>
<style>
td, th { border: 1px solid #dddddd; text-align: left; padding: 8px;}
</style>
The table is looking something like this when I am pasting 3 column and 4 rows data from excel sheet into HTML table.
Related
I have a styled component div that have a table, tr, th, and td elements nested within that div so far I can give the table a border by using > table, but I can't give the rest of the elements like the tr, th, and td elements a border to separate the content making it easier to read. Here is the code I have so far.
the styled component
const Skill1 = styled.div`
border: 1px solid black;
> table{
border: 1px solid black;
}
the jsx
<Skill1>
<table>
<tr>
<td colSpan="1"><img src={critdmg} /></td>
<td colSpan="10">Self-Modification EX</td>
</tr>
<tr>
<td colSpan="11">
Increase critical damage for 3 turns.
<br />
Increase critical star absorption for 3 truns.
</td>
</tr>
<tr>
<th>Level</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
</tr>
<tr>
<th>critical damage+</th>
<td>20%</td>
<td>23%</td>
<td>26%</td>
<td>29%</td>
<td>32%</td>
<td>35%</td>
<td>38%</td>
<td>41%</td>
<td>44%</td>
<td>50%</td>
</tr>
<tr>
<th>Star absorption+</th>
<td>400%</td>
<td>440%</td>
<td>480%</td>
<td>520%</td>
<td>560%</td>
<td>600%</td>
<td>640%</td>
<td>680%</td>
<td>720%</td>
<td>800%</td>
</tr>
<tr>
<th>Cooldown Times</th>
<td colSpan="5">7</td>
<td colSpan="4">6</td>
<td>5</td>
</tr>
</table>
</Skill1>
how would I be able to do it.
I guess you need to add > table, table td { in your styled component, in order for the child tags to have the same border style.
Is this what you are looking for?
I am displaying a table. Some cells of this table are filled with content. But there are some cells that are empty. What i want is that all empty cells have a different background color. How can i do that?
How can i check if a td is empty?
You can use :empty selector:
Demo:
//You can loop and remove the space charcater from cells
document.querySelectorAll('table tr > td').forEach(c => c.textContent = c.textContent.trim());
table, th, td {
border: 1px solid black;
}
table tr > td:empty {
background-color: yellow;
}
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td></td>
</tr>
<tr>
<td>March</td>
<td>$90</td>
</tr>
<tr>
<td>May</td>
<td> </td>
</tr>
</table>
You can use js/jquery to check if a cell is empty or not. Based on that you can add a class and give a background-color to the same.
Or if you want a css only approach, you can use :empty selector. But the problem with :empty is that it will not consider a td an empty one if there is just a few space in it. Check the below snippet.
$(document).ready(function () {
$("table td").each(function (index, eachCell) {
if ($(eachCell).html().trim().length === 0) {
$(eachCell).addClass("empty-cell");
}
});
});
.empty-cell {
background-color: red;
}
td {
border: 1px solid #ddd;
padding: 5px;
}
td:empty {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td></td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td> </td>
</tr>
</tbody>
</table>
I have one table in that I am repeating data inside column. One column have property and other have value of that property. I am getting problem when data wraps property and value not aligned properly. Below is my example.
My example
<table cellspacing="0" celpadding="0">
<thead>
<tr>
<th>Property</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div>Property 1</div>
<div>Property 2</div>
<div>Property 3</div>
<div>Property 4</div>
</td>
<td>
<div>Value 1</div>
<div>Value 2</div>
<div>Value 3</div>
<div>Value 4</div>
</td>
</tr>
<tr>
<td>Property 2</td>
<td>Value 2</td>
</tr>
<tr>
<td>Property 1</td>
<td>Property 1</td>
</tr>
</tbody>
</table>
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
color:#fff;
}
table{
width:100px
}
table tr td,table tr th{border:1px solid #fff;padding:5px;}
table tr td div{
border-bottom:1px solid #eee;
padding:5px 0;
}
Right now I have given fixed width to table to produce my problem. In this condition what should I do to reolve this issue. I want to align property and value equally with respective values. Please help.
The easiest way to solve your issue is to add a fixed height to your table tr td div rules, so that it aligns properly. So, you could update that specific rule to something like:
table tr td div{
border-bottom: 1px solid #eee;
padding: 5px 0;
height: 48px;
}
However, <div>s are not really supposed to go into tables. Maybe you need to rethink your table's structure, as this will have accessibility issues for sure.
What's wrong with using a classic table with no random divs contained in your td elements? Consider the below:
<table cellspacing="0">
<tr>
<td>Property 1</td>
<td>Value 1</td>
</tr>
<tr>
<td>Property 2</td>
<td>Value 2</td>
</tr>
<tr>
<td>Property 3</td>
<td>Value 3</td>
</tr>
<tr>
<td>Property 4</td>
<td>Value 4</td>
</tr>
</table>
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
color:#fff;
}
table{
width:200px
}
td {
width:100px;
padding:10px;
border:1px solid white;
}
Here is a fiddle: https://jsfiddle.net/8dyxqbkz/2/
You should use <tr><tr/> tag for table row
and <td><td/> tag for table cell.
Let me show an example:
<table cellspacing="0" celpadding="0">
<tr>
<td>
Property 1
</td>
<td>
Property 2
</td>
<td>
Property 3
</td>
<td>
Property 4
</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
<td>Value 4</td>
</tr>
<tr>
<td>Property 2</td>
<td>Property 1</td>
</tr>
<tr>
<td>Value 2</td>
<td>Property 1</td>
</tr>
</table>
make font-weight:bold if table tbody tr td value greater than 0 without loop using javascript or jquery
Selector is
$(table tbody tr td)
without $.each
HTML Sample
<table id="example">
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
</tr>
</table>
<table id="myTable">
<tr>
<td>1</td>
<td>0</td>
<td>3</td>
</tr>
</table>
If you need a Jquery, make
$('table td').attr('style','font-weight:bold;');
Without looping, and since values get set client side, you could combine the CSS attr(), a pseudo element like ::after and an attribute selector.
When your client side routine set a value, it does so to the attribute data-value="" instead of inside the element itself, and when done like that, you can use this CSS to style the cells
table td {
background: #eee;
}
table td::after {
content: attr(data-value);
padding: 10px;
}
table td[data-value="0"] {
color: green;
}
table td:not([data-value="0"]) {
color: white;
background: green;
}
<table id="example">
<tr>
<td data-value="0"></td>
<td data-value="1"></td>
<td data-value="2"></td>
</tr>
</table>
<table id="myTable">
<tr>
<td data-value="1"></td>
<td data-value="0"></td>
<td data-value="3"></td>
</tr>
</table>
You can use the :empty css selector like this :
#example td{
background-color: magenta;
color: #FFF;
}
#example td:not(:empty){
background: blue;
}
#myTable td:not(:empty){
font-weight: bold;
}
<table id="example">
<tr>
<td></td>
<td>test</td>
<td>test</td>
</tr>
</table>
<table id="myTable">
<tr>
<td></td>
<td>test</td>
<td>test</td>
</tr>
</table>
You can use .text() for retrieve the value and then passing a function that checks the value, returning it in bold in case of greater than 0.
I think it is the only way to do it without adding extra attributes to the HTML you provide us.
Check this snippet.
tds = $('table tr td').text(function(index, text){
return text > 0 ? $(this).css({"font-weight": "bold"}).text() : text;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example">
<tr>
<td>0</td>
<td>1</td>
<td>2</td>
</tr>
</table>
<table id="myTable">
<tr>
<td>1</td>
<td>0</td>
<td>3</td>
</tr>
</table>
Finally, the solution is to use JQuery selector :contains() to get cell text
$('table td:contains("0")').attr('style','font-weight:bold');
$('table td:contains("test")').attr('style','background-color:yellow');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<table border=1 width=200 value=9>
<tr>
<td>1</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>3</td>
<td>test</td>
</tr>
</table>
You can make the table cell bold by using this CSS:
table tbody tr td {
font-weight: bold;
}
That will apply an bold effect to text in the table cells. If there's no table cells to show then it'll skip the CSS rule.
I have created the following table in html. I want to apply a style to table body elements in column which i have added a css class. But the style should not apply to header column. only to body column.
Here for a example i have add CSS class called "body-right". The result what i want is all the table body elements in column "Value" should "right align" except header column. How to achieve this in css.
Thanks a lot.
<table>
<thead>
<tr>
<td>Criteria</td>
<td>Description</td>
<td class="body-right">Value</td>
</tr>
</thead>
<tbody>
<tr>
<td>ABC</td>
<td>GGGGGG</td>
<td>35.63</td>
</tr>
<tr>
<td>XYZ</td>
<td>HHHHH</td>
<td>68.26</td>
</tr>
<tr>
<td>MNP</td>
<td>KKKKK</td>
<td>45.26</td>
</tr>
</tbody>
</table>
Use this:
tbody td:nth-of-type(3) {
text-align: right;
}
Example
table {
border-spacing: 0;
border-collapse: collapse;
font: 14px verdana;
}
td {
padding: 0.2em;
border: 1px solid gray;
}
tbody td:nth-of-type(3) {
text-align: right;
background: yellow;
width: 4em;
}
<table>
<thead>
<tr>
<td>Criteria</td>
<td>Description</td>
<td class="body-right">Value</td>
</tr>
</thead>
<tbody>
<tr>
<td>ABC</td>
<td>GGGGGG</td>
<td>35.63</td>
</tr>
<tr>
<td>XYZ</td>
<td>HHHHH</td>
<td>68.26</td>
</tr>
<tr>
<td>MNP</td>
<td>KKKKK</td>
<td>45.26</td>
</tr>
</tbody>
</table>
You can acheive this by specifying inline style for the header section seperately.
or make a little change in the css
like
thead .body-right { text-align:right; }