prevent span in td contenteditable - javascript

I use contenteditable in td
<table style="width:200px">
<tr>
<td contenteditable style="width:100px" id="1">test</td>
<td contenteditable style="width:100px" id="2">test</td>
</tr>
</table>
when I enter more text in the first td, it make the second td become smaller, then table will bigger than 200px that I specified before, how can I prevent that ?

http://jsfiddle.net/8ZNj3/1/
html:
<table>
<tr>
<td contenteditable>this long text won't overflow</td>
<td contenteditable>test</td>
</tr>
</table>
css:
table {
width: 200px;
table-layout: fixed;
}
td {
width: 100px;
white-space: nowrap;
overflow: hidden;
}

Try this:
<table style="max-width:200px;">
<tr>
<td contenteditable="true" style="max-width:100px; word-wrap: break-word;" id="1">test</td>
<td contenteditable="true" style="width:100px;" id="2">test</td>
</tr>
</table>

Related

CSS Border overlap between two cells in table

how to add border for filename3 and filename4 column as a whole using html and css.
table with borders
<table>
<tbody>
<td id="filename1"> 1</td>
<td id="filename2">1 </td>
<td id="filename3"> 1</td>
<td id="filename4"> 1</td>
</tbody>
</table>
You can give both cells a border, then remove the border on one side with the border-right and border-left properties:
table {
border-collapse: collapse;
}
#filename3 {
border: 10px solid;
border-right: 0px;
}
#filename4 {
border: 10px solid;
border-left: 0px;
}
<table>
<td id="filename1">1</td>
<td id="filename2">2</td>
<td id="filename3">3</td>
<td id="filename4">4</td>
</table>
css:
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
Html:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td colspan="2">sum: 180</td>
</tr>
</table>
Have you tried this colspan attribute? If this is what you asked.
I assume you are trying to select both of the ID's at the same time? You can select both of the IDs by
#filename3, #filename4 {/*enter css styles here*/}
If you are trying to select both by a single class, simply add a parent div around the 2 elements you are trying to group.
<tbody><td id="filename1"> </td><td id="filename2"> </td><div class='parent'><td id="filename3"> </td><td id="filename4"> </td></div></tbody>
Hope this helped :)!

How do I set fixed table's size after clicking 'expand' button

I have a table which is hidden by default and can only be seen after clicking "expand" button. The problem is when I click the button, the whole tr where this button is located messes up. Here's what I mean
$(document).ready(function() {
$('.partTableContent').hide();
$('.expandButton').click(function() {
// .parent() selects the A tag, .next() selects the P tag
$(this).closest('tr').next(' tr').find('div.partTableContent').slideToggle(750);
});
});
<style>.partsTable {
border-collapse: collapse;
}
.sideForPartsTable {
border: 3px solid #05788D;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<div class="partTableDiv">
<table class="partsTable" style="width: 100%; height: 30vh">
<tr>
<td class="sideForPartsTable" width="5%"><button class="expandButton">Expand button</button></td>
<td class="sideForPartsTable">Title</td>
<td class="sideForPartsTable" width="5%"><button class="editButton">edit</button></td>
<td class="sideForPartsTable" width="5%"><button class="removeButton">remove</button></td>
</tr>
<tr>
<td colspan="4">
<div class="partTableContent">
<table style="width: 100%">
<tr>
<td> table's tr </td>
</tr>
<tr>
<td> table's tr </td>
</tr>
<tr>
<td> table's tr </td>
</tr>
<tr>
<td> table's tr </td>
</tr>
<tr>
<td> table's tr </td>
</tr>
<tr>
<td> table's tr </td>
</tr>
<tr>
<td> table's tr </td>
</tr>
<tr>
<td> table's tr </td>
</tr>
<tr>
<td> table's tr </td>
</tr>
<tr>
<td> table's tr </td>
</tr>
</table>
</div>
</body>
See? When I click expand button, the whole tr's (where this button is located) height shrinks. Especially noticeable when click "Full page". How can I avoid it and make it the height static?
plz give a height for the first tr say height: 50px;
<table class="partsTable" style="width: 100%;">
<tr style="height: 30vh">
<td class="sideForPartsTable" width="5%"><button class="expandButton">Expand button</button></td>
<td class="sideForPartsTable">Title</td>
<td class="sideForPartsTable" width="5%"><button class="editButton">edit</button></td>
<td class="sideForPartsTable" width="5%"><button class="removeButton">remove</button></td>
</tr>

Convert table to div with CSS without tbody

I want to convert a table to div tables, but when I created the table in Dreamweaver it just added the <tbody> tag. Does I need it when converting the table to div-table ?
Here is the code of the table
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
As you can see I want a table using divs with
width="100%" border="0" align="left" cellpadding="0" cellspacing="0"
What is the correct way to do that? And is neccesary to set another div for the <tbody> tag ?
HTML
<div class="table">
<div class="tr">
<div class="td"></div>
<div class="td"></div>
</div>
<div class="tr">
<div class="td"></div>
<div class="td"></div>
</div>
</div>
CSS
.table {
width: 100%;
display: table;
border-collapse: collapse;
}
.table .tr {
display: table-row;
}
.table .td {
display: table-cell;
vertical-align: middle;
text-align: left;
}
Hope this works for you. :)

Table style messed up when printing

I'm trying to print a simple table, yet the layout seems to mess up. Does anybody know why?
Table to print
Print Preview
Here is the HTML and JS I have used to create the Table.
function printData() {
var divToPrint = document.getElementById("printtable");
newWin = window.open("");
newWin.document.write(divToPrint.outerHTML);
newWin.print();
newWin.close();
}
$('button').on('click', function() {
printData();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="printtable" style="border: 1px solid black; width: 90mm; height: 29mm;">
<div style="float: left; font-size: 10px; position: relative; top: 50%; transform: translateY(-50%); margin-left: 2mm;">
<p>
<img src="/" alt="" height="30">
</p>
<table>
<tbody>
<tr>
<td><u>Row 1</u> :</td>
<td> Row 1</td>
</tr>
<tr>
<td><u>Longer Row 2</u> :</td>
<td> Row 2</td>
</tr>
<tr>
<td><u>R3</u> :</td>
<td> Row 3</td>
</tr>
</tbody>
</table>
</div>
</div>
<br />
<br />
<button>Print me</button>
You need to specify style related to print .
You can use #media print to specify styles for print
In the end, I used the solution proposed here is such alignment achievable without <table>?
By aligning my text without using the table tag, the text prints just fine.

how to replace values in innerhtml using javascript

I'm dynamically(on click of radio button) copying the inner html of one row(in a table) to other but after removing some elements.
var a = document.getElementById('copyrow' + e).innerHTML;
a = a.replace('<input type="radio" name="selectradio" id="shareredio"+e "" a="" href="#" onclick="setText("+e");">',"")
.replace('<div class="custom-radio" style="margin-top:50px;">',"")
.replace('<label for="shareredio"+e""></label>',"")
.replace('<input type="checkbox" name="sharecheck" id="sharecheck"+e"">',"")
.replace('<label for="sharecheck"+e""></label>',"")
.replace('Share fare',"");
document.getElementById('copyDiv').innerHTML = a;
I don't know enough about javascript but if there is any better way then please help...
This is probably not the best way to do it but I thought I'd at least give you an answer quickly. This is using jQuery to manipulate the DOM.
var $a = $('#copyrow'+e).clone();
$a.find('input#shareredio'+e).remove();
$a.find('div.custom-radio').remove();
$a.find('label[for="shareredio'+e+'"]').remove();
$a.find('input#sharecheck'+e).remove();
$a.find('label[for="sharecheck'+e+'"]').remove();
var result = $a.html().replace('Share fare', "");
$('#copyDiv').html(result);
something like this?
$(document).ready(function() {
$('.copy').on('change', function(){
if($('.copy:checked').val() == 'yes'){
$('.table2').find('.rowContents1').html($('.table1').find('.rowContents1').html());
$('.table2').find('.rowContents2').html($('.table1').find('.rowContents2').html());
$('.table2').find('.rowContents3').html($('.table1').find('.rowContents3').html());
}
else {
$('.table2').find('.rowContents1').html('');
$('.table2').find('.rowContents2').html('');
$('.table2').find('.rowContents3').html('');
}
});
});
table {
border: 1px solid gray;
}
td, th {
border: 1px solid gray;
padding: 5px;
text-align: center;
}
div{
display: inline-block;
margin-right: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Copy Contents Over?<br/>
<input type="radio" class="copy" value="yes" name="copyRadio"/> Yes
<input type="radio" class="copy" value="no" name="copyRadio"/> No
<br/><br/>
<div>
Table1
<table class="table1">
<header>
<tr>
<th>Row Number</th>
<th>Row Contents</th>
</tr>
</header>
<body>
<tr>
<td class="rowNum1">1</td>
<td class="rowContents1">This is the Contents of Row 1</td>
</tr>
<tr>
<td class="rowNum2">2</td>
<td class="rowContents2">This is the Contents of Row 2</td>
</tr>
<tr>
<td class="rowNum3">3</td>
<td class="rowContents3">This is the Contents of Row 3</td>
</tr>
</body>
</table>
</div>
<div>
Table2
<table class="table2">
<header>
<tr>
<th>Row Number</th>
<th>Row Contents</th>
</tr>
</header>
<body>
<tr>
<td class="rowNum1">1</td>
<td class="rowContents1"></td>
</tr>
<tr>
<td class="rowNum2">2</td>
<td class="rowContents2"></td>
</tr>
<tr>
<td class="rowNum3">3</td>
<td class="rowContents3"></td>
</tr>
</body>
</table>
</div>
i used .html() to rewrite the contents inside each td. .find() function just traverses down the element tree and finds the descendants $('.table2').find('.rowContents1') is saying in element of class .table2, find the descendants with class .rowContents1.
hope this helps and is what you're looking for

Categories