I was looking for a TinyMCE plugin for table resize cell by dragging and I came to:
http://sourceforge.net/p/tinymce/plugins/163/?page=2
Here there is a working example http://tinymcesupport.com/premium-plugins/resize-table-cells
Unfortunately this is for an old version (I'm using the 4) and also following the migration guide I didn't came to a working version.
I'm not a Java programmer and I don't know if the migration is quite simple with some small changes or more development is necessary.
Thanks
TinyMCE now supports resizing columns with its 4.3 release. Simply enable the table plugin as shown:
tinymce.init({
inline: true,
selector: 'table',
plugins: 'table'
});
table {
border-collapse: collapse;
}
th, td {
border: solid 1px #ccc;
text-align: center;
padding: 10px;
}
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
Make sure the <code>table</code> plugin is activated, then drag the columns to resize them:
<table style="width: 100%;">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</tbody>
</table>
Related
I need to make a table responsive using CSS. When the screen size is small I must make the table headers and table cell data appear side by side. How can I do that using only CSS?
<table class="hobbies_table">
<tr>
<th>Name</th>
<th>Age</th>
<th class="hobbies">Hobby1</th>
<th class="hobbies">Hobby2</th>
<th>Contact</th>
</tr>
<tr>
<td>John</td>
<td>21</td>
<td class="hobbies_values">Football</td>
<td class="hobbies_values">Snooker</td>
<td>1234567890</td>
</tr>
<tr>
<td>Jack</td>
<td>30</td>
<td class="hobbies_values">Reading</td>
<td class="hobbies_values">Swimming</td>
<td>1234567890</td>
</tr>
<tr>
<td>Jenna</td>
<td>40</td>
<td class="hobbies_values">Travelling</td>
<td class="hobbies_values">Singing</td>
<td>1234567890</td>
</tr>
</table>
.hobbies {
width: 50%;
display: flex;
}
.hobbies_values {
width: 50%;
display: flex;
}
#hobbies_table td:nth-of-type(3):before { content: attr(hobbies) }
#hobbies_table td:nth-last-of-type(2):before { content: attr(hobbies) }
I know only basic CSS. So this is what I have tried. But I came to know this is the wrong way. So how can I correct the code?
Here in #media, I want the hobbies and hobbies_values to be displayed like this:
Hobby1: Football
Hobby2: Snooker
Hobby1: Reading
Hobby2: Swimming
Hobby1: Travelling
Hobby2: Singing
May it helps :)
.hobbies_table {
width: 100%;
}
th {
display: flex;
}
tr {
width: 20%;
display: inline-grid;
}
<table class="hobbies_table">
<tr>
<th>Name</th>
<th>Age</th>
<th class="hobbies">Hobby1</th>
<th class="hobbies">Hobby2</th>
<th>Contact</th>
</tr>
<tr>
<td>John</td>
<td>21</td>
<td class="hobbies_values">Football</td>
<td class="hobbies_values">Snooker</td>
<td>1234567890</td>
</tr>
<tr>
<td>Jack</td>
<td>30</td>
<td class="hobbies_values">Reading</td>
<td class="hobbies_values">Swimming</td>
<td>1234567890</td>
</tr>
<tr>
<td>Jenna</td>
<td>40</td>
<td class="hobbies_values">Travelling</td>
<td class="hobbies_values">Singing</td>
<td>1234567890</td>
</tr>
</table>
There are two popular approaches to your problem:
Solution A (Bootstrap's classic "table responsiveness")
Simply wrap the table inside a scrollable div and allow it to have its full width. Note this becomes confusing on mobile devices, especially when the user starts scrolling in both directions. A better mobile user experience is often times opening the table in a modal and allowing the user to scroll it in full screen).
Solution B (Separate markup for each case)
Have separate markup for each case, hiding the unwanted contents using #media queries. The base principle is that you duplicate content and hide the clone you don't want displayed on each responsiveness interval.
As with almost anything, no solution is clearly better than the other. It largely varies from case to case.
Here's a solution catered for your particular case (based on clarifications in comments):
.mobile_content {
display: none;
}
#media (max-width: 700px) {
.desktop_content {
display: none;
}
.mobile_content {
display: block;
}
.hobbies_values + .hobbies_values {
display: none;
}
}
<table class="hobbies_table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th class="hobbies_values">
<div class="desktop_content">Hobby1</div>
<div class="mobile_content">Hobbies</div>
</th>
<th class="hobbies_values">Hobby2</th>
<th>Contact</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>21</td>
<td class="hobbies_values">Football<div class="mobile_content">Snooker</div></td>
<td class="hobbies_values">Snooker</td>
<td>1234567890</td>
</tr>
<tr>
<td>Jack</td>
<td>30</td>
<td class="hobbies_values">Reading<div class="mobile_content">Swimming</div></td>
<td class="hobbies_values">Swimming</td>
<td>1234567890</td>
</tr>
<tr>
<td>Jenna</td>
<td>40</td>
<td class="hobbies_values">Travelling<div class="mobile_content">Singing</div></td>
<td class="hobbies_values">Singing</td>
<td>1234567890</td>
</tr>
</table>
It's actually a separate case of solution B (where, rather than completely replace the table markup - you reuse part of it and only duplicate the part that is displayed under other column's content).
Barcode in table thead tag render not correctly as code and image show below
<table id="BranchReturnReportDataTable" class="table table-bordered table-striped">
<thead>
<tr>
<th colspan="6" id="docBarcode" style="text-align:center" class="barcode">*8851234567890*</th>
</tr>
<tr>
<th>Column A</th>
<th>Column B</th>
<th>Column C</th>
<th>Column D</th>
<th>Column E</th>
<th>Column F</th>
</tr>
</thead>
<tbody id="BranchReturnReportDataTableBody"></tbody>
</table>
Barcode render show like this
But when I use it outside table it work like a charm.
<p id="docBarcode" class="box-title barcode" style="text-align:center">*8851234567890*</p>
Both code use this same css code
#font-face {
font-family: 'C39HrP72DlTt';
src: url('V100018.TTF');
}
.barcode {
font-family: 'C39HrP72DlTt';
font-size: 6em;
/*padding: 10px;*/
}
The default browser style for the table header seems to set the font-weight to bold, causing it not to appear correctly. To fix this, change your CSS to
.barcode {
font-family:'C39HrP72DlTt';
font-size: 6em;
font-weight: normal;
/*padding: 10px;*/
}
I have a bootstrap table as follows:
<table class="table table-bordered">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>
The two column are equally spaced which is fine but if i drop an <input> element in to one of the columns this column stretches to take up about 3/4 of the overall table.
http://www.bootply.com/115049
My question is why does it do this and how can I control it?
Any help much appreciated.
<table class="table table-bordered">
<thead>
<tr>
<th class="col-md-10">Col1</th>
<th class="col-md-2">Col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>
This is down to the way HTML tables work. By default, table cells will scale according to their contents - any size you give them is used as a guide. So, for instance:
td {
width: 50%;
/*
If this cell is empty, it will take up half of
the table. But if the content needs to, it will
expand to take up more space.
*/
}
You can work around this by setting table-layout: fixed; in your CSS:, e.g.
table.fixed {
table-layout: fixed;
}
This makes tables adhere more strictly to the dimensions you set in CSS, rather than what the content dictates. See https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout for more information.
Once this is done, you can apply the normal Bootstrap grid classes to control the width. Apply them to the cells (td or th) in the first row and they'll repeat all the way down.
Why ? I don't know :)
How to control it ?
You can simply but a width parameter to your td, such as :
<td width=50%><input type="text"></td>
You can do it like this, or using your css file by saying all from this class should take half of the table width.
td {
width: 50%;
}
ie10 is not showing fine border over colspan.
It is showing well on other browser, but not on IE 10.
I'll post my code below.
HTML CODE:
<table>
<thead>
<tr>
<td rowspan="2">1</td>
<td rowspan="2">2</td>
<td colspan="4">3</td>
<td rowspan="2">4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td colspan="2">7</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td colspan="3">4</td>
<td>5</td>
</tr>
</tbody>
</table>
CSS CODE:
table tr td {
border: 1px solid black;
width: 100px;
}
table {
border-collapse:collapse;
}
border under 7 is gone. How can I show it?
here is example on jsfiddle :
http://jsfiddle.net/H4z7Q/
ADD: If some event occurs in ie10, border come back to normal.
You can use table inline style stats. instead of border-collapse:collapse;
<table cellpadding=0 cellspacing=0>
will count as same effect.
but will return and will chrice ur problem
The markup violates the HTML table model, as you can see by checking it with http://validator.w3.org which says, referring to the first row: “Table column 6 established by element td has no cells beginning in it”.
So all bets are off. Modify the table structure so that it conforms, or try to achieve the desired layout using other tools than a layout table.
There is a table which I have given border. After giving border there were double border that were coming after some googling I found that border-collapse is my saviour. but after trying to use it in every possible way it is not working.
There is a double border at the bottom that is coming that I want to remove.
For better understanding attached screen shot:
I want to remove the double border coming after each cell.
Markup.
<table border="1" cellpadding="2" cellspacing="0" style="border-collapse: collapse;">
<thead>
<tr>
<th >
Login Name
</th>
<th>
SheetName
</th>
</tr>
</thead>
<tr>
<td>aaa</td>
<td>abc</td>
</tr>
<tr>
<td>asdfasdf</td>
<td>aasdfsadfbc</td>
</tr>
</table>
CSS is needed to provide a definite answer. As others said, make sure there aren't any global CSS files altering your HTML. It appears your CSS has a tr {margin-top:10px;} set in it, or something providing a similar effect.
Just out of curiosity, why are you using the HTML cellpadding attribute? The CSS padding attribute can perform the same function and provides much more flexibility. You will also find separating your styles (CSS) from your HTML will make changing and updating much easier than going back to modify each inline style.
<table id="table">
<thead>
<tr>
<th >
Login Name
</th>
<th>
SheetName
</th>
</tr>
</thead>
<tr><td>aaa</td><td>abc</td></tr>
<tr><td>asdfasdf</td><td>aasdfsadfbc</td></tr>
</table>
CSS:
#table {
padding: 10px 5px 10px 5px;
//this is shortand for top right bottom left
border-collapse: collapse;
//this is becoming deprecated and is mainly used to support older versions of IE
}