Below is mycode. Problem is whenever i use float element whose width is more than td:ed(1). It takes extra space. I appreciate your suggestion.
<table style="background:#ff0;border:1px solid #ccc; width:100%">
<tbody>
<tr>
<td style="width:30px; border-right:1px solid #ccc; overflow:hidden">1</td>
<td>Test</td>
</tr>
<tr >
<td colspan="2"><input type="text" /></td>
</tr>
</tbody>
</table>
Below are screen shots of .
Mozilla
IE7
I found answer for this.
For IE i added css property
table
{
table-layout:fixed;
}
This solves my problem.
Thanks.
Related
I just follow the example for creating a table with the bootstrap Table element.
Here is my StackBlitz, I wonder why a thick black line exists at the bottom of the table header.
However, the example site does not have a thick black line exists at the bottom of the table header.
Is there something wrong? is it possible to remove the thick black line from the bottom of the table header?
It is border assigned by bootstrap when you use Table group dividers. See Bootstrap docs for more details.
To get remove it add borderTop: 'none' to tbody. So updated component looks like below
import React from 'react';
import Table from 'react-bootstrap/Table';
export default function App() {
return (
<div className="m-4">
<Table striped bordered hover>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody style={{ borderTop: 'none' }}>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<td>3</td>
<td colSpan={2}>Larry the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</Table>
</div>
);
}
Stackblitz Reproduction: https://react-ue5ckm.stackblitz.io
You have to need override the following style
.table>:not(:first-child) {
border-top: 2px solid currentColor;
}
to remove border
.table>:not(:first-child) {
border-top: none;
}
I am new to react and datatables and currently working on my final year project
I have retrieved the data and managed to populate data into datatable but don't know how to format it.
How to format datatable like this:
image
Code: https://codesandbox.io/s/ry6910y4jn?fontsize=14
Any suggestion hint would be helpful, thanks in advance.
Try giving this a shot by running the snippet below. The trick is to use rowspan.
That said, using React to render your multi-row, a naive approach might look something like:
const renderMultiRow = (code, date, rice, wheat, jaggery) => {
return (
<React.Fragment>
<tr>
<td rowspan="2">{code}</td>
<td rowspan="2">{date}</td>
<td>Stock</td>
<td>{rice.stock}</td>
<td>{wheat.stock}</td>
<td>{jaggery.stock}</td>
</tr>
<tr>
<td>Daily Use</td>
<td>{rice.use}</td>
<td>{wheat.stock}</td>
<td>{jaggery.stock}</td>
</tr>
<React.Fragment>
)
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 5px;
}
<table>
<thead>
<th>Code</th>
<th>Date</th>
<th>Category</th>
<th>Rice</th>
<th>Wheat</th>
<th>Jaggery</th>
</thead>
<tbody>
<tr>
<td rowspan="2">1234</td>
<td rowspan="2">2019-05-11</td>
<td>Stock</td>
<td>50</td>
<td>50</td>
<td>50</td>
</tr>
<tr>
<td>Daily Use</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td rowspan="2">5678</td>
<td rowspan="2">2019-05-12</td>
<td>Stock</td>
<td>30</td>
<td>30</td>
<td>30</td>
</tr>
<tr>
<td>Daily Use</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</tbody>
</table>
I'm trying to make application (using vb.net and sql server) that find matching record from a static Master Table. The Master Table looks like this
table, th, td {
border: 1px solid black;
}
<table style="width:100%">
<tr>
<th>Pkey</th>
<th>Item1</th>
<th>Item2</th>
<th>Item3</th>
<th>Item4</th>
</tr>
<tr>
<td>Red</td>
<td>Apple</td>
<td>Hat</td>
<td>Stroberry</td>
<td>Car</td>
</tr>
<tr>
<td>Blue</td>
<td>Ocean</td>
<td>Sky</td>
<td>Light</td>
<td>Moon</td>
</tr>
<tr>
<td>Yellow</td>
<td>Sun</td>
<td>Pokemon</td>
<td>Orange</td>
<td>Banana</td>
</tr>
<tr>
<td>Green</td>
<td>Tree</td>
<td>Leave</td>
<td>Tea</td>
<td>Energy</td>
</tr>
</table>
And then there is one table that consist of one column with the value for example
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
<table style="width:100%">
<tr>
<th>Realtime Check</th>
</tr>
<tr>
<td>Apple</td>
</tr>
<tr>
<td>Energy</td>
</tr>
<tr>
<td>Stroberry</td>
</tr>
</table>
It will give result
Red; Item1,Item3 and
Green; Item4. Help me please.
I am doing responsive mail and I need to make responsive td in table (without class or using media-query).
Simply - I need on small devices rank the td under them.
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="fff" style="width:100%; background-color: #fff; max-width:600px;">
<tr>
<td><img src="pic" /></td>
<td><a href="https://blahblah2.com/><img src="pic" /></a></td>
<td><a href="http://www.blahblah3.com/><img src="pic" /></a></td>
<td><a href="http://www.blahblah4.com/><img src="pic" /></a></td>
</tr>
</table>
You can try display:inline-block for every column in your table. It will make the columns shift below each column when width of the screen decreases.
As you have mentioned that you don't need class so m writing the inline style for each column. Try this code :
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="fff" style="width: 100%;
background-color: #fff; max-width: 600px;">
<tr>
<td style="display: inline-block; padding: 5px;">
<p>
hellohello</p>
</td>
<td style="display: inline-block; padding: 5px;">
<p>
hellohello</p>
</td>
<td style="display: inline-block; padding: 5px;">
<p>
hellohello</p>
</td>
<td style="display: inline-block; padding: 5px;">
<p>
hellohello</p>
</td>
</tr>
</table>
Fiddle here
You can create a media query to force all the td elements to drop below each other at a certain screen width. This ensures they all become vertical-aligned at the same time. It also preserves the table's horizontal-aligned print format if you are generating a report for printing.
#media only screen and (min-width: 0px) and (max-width: 700px) {
td {
display:inline-block;
padding:5px;
width:100%;
}
}
I am getting my head around the ngtable. Just one question, how can I make the columns fixed width? In this sample the account and adviser column have variable width when going to the next page.
This is the html:
<table ng-table="tableParams" template-pagination="custom/pager" class="table">
<tr ng-repeat="account in $data | filter:accountName | filter:key" class="orders tablerow">
<td data-title="'ID'" sortable="'account.accountId.key'">
{{account.account.accountId.key}}
</td>
<td data-title="'Account'" sortable="'account.accountName'">
{{account.account.accountName}}
</td>
<td data-title="'Adviser'" sortable="'account.adviser.key'">
{{account.account.adviser.key}}
</td>
<td data-title="'Product'" sortable="'account.productName'">
{{account.account.productName}}
</td>
<td data-title="'Status'" sortable="'minOpenOrderState'">
{{account.minOpenOrderState}}
</td>
</tr>
</table>
Plunkr:http://plnkr.co/edit/vPQeVx?p=info
just add css for "td"
td{
width:20%;
float:left;
word-wrap:break-word;
}
Accepted answer is working perfectly, but it does not cover the case when most of the columns width does not matter, but 1-2 columns should have a fixed width (or at least not be squeezed)
One work-around is to force the width of a column by defining a fixed-width content. Something like this:
<td title="'TheTitle'" sortable="'PassedStr'">
<div style="width:120px">
<b>{{item.SomeCol}}</b>
<span ng-show="item.ErrorMessage">
{{item.OtherCol}}
</span>
</div>
</td>