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
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 :)!
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>
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. :)
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.
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