I want to set fixed width to column and if table data is large then that column should be a scroll-able and if screen resolutions get changed then table also get scroll-able.
Example :
Name Surname Salary
sam jdfgdhfgdfgudfgiuudifghdfgjjdfhgjkhdfghkjdhfgjkhdfkjgkjdfhgk 5555
In above example Surname is large then table and column is not get responsive.
How to set fixed length for column with scroll-able property?
Table and column also be responsive to get executable in other screen resolutions.
Wrap the content of the <tbody> in a scrollable <div> :
html:
...
<tbody>
<tr>
<td>
<div class="scroll-table">
<table>
<tr>
<td>Sam</td>
</tr>
<tr>
<td>jdfgdhfgdfgudfgiuudifghdfgjjdfhgjkhdfghkjdhfgjkhdfkjgkjdfhgk </td>
</tr>
<tr>
<td>5555</td>
</tr>
...
css
.scroll-table{
overflow:scroll;
}
Related
I want to fuse a cell with the cell of the previous row in a shopping cart.
Here is what I want to do
Table rowspan
No problem for the first and last columns, I just use rowspan on cell 1 and 4 then hide cell 5 and 8, but how can I do the same for cells 3 and 7 ? I know I could use Javascript and appendTo the content of the cell 7 into the cell 3 then use rowspan on cell 3, but I'm wondering if it is possible to do that only with CSS.
My code looks like that right now :
<table>
<tr>
<td rowspan="2">Image</td>
<td>Title</td>
<td></td>
<td rowspan="2">Price</td>
</tr>
<tr>
<td>Description</td>
<td>Delete</td>
</tr>
</table>
I want the cell "Delete" to fill both rows, and I can't swap its content with the empty cell on the above TR.
I am trying to create a table in reactjs using bootstrap. Everything seems fine except:
As you can see, the titles inside the thead tag is not aligned exactly above its corresponding td tag. Is there a way to do it?
Here is the code:
<Table striped hover responsive >
<thead>
<tr>
<th>Rank</th>
<th>Logo</th>
<th>Name</th>
<th ></th>
<th>Wins</th>
<th>Loss</th>
<th>Draws</th>
<th>Games</th>
<th>GF</th>
<th>GA</th>
</tr>
</thead>
<tbody>
{team && team.map((team, key) =>{
return <tr key={key}>
<td>{key + 1}</td>
<td><img src={team.team.logos[0].href} alt='team logo' width={40} height={40}/></td>
<td >{team.team.name}</td>
<td>{team.stats[0].value}</td>
<td>{team.stats[1].value}</td>
<td>{team.stats[2].value}</td>
<td>{team.stats[3].value}</td>
<td>{team.stats[4].value}</td>
<td>{team.stats[5].value}</td>
</tr>
})}
</tbody>
</Table>
I cannot see the code, but there seems to be some margin for the td. But you will still have issues with it lining up due to the number of words in td to the data listed. A solution would be styling each td by itself until you get it how you'd like.
So I have built a table in semantic-ui. very simple. however styles dont seem to apply to my table in certain aspects and i cant get the headings to map over the columns. see the below screenshot
the L column is fine but the others are a bit wonky and name is just well off. how can i adjust the styles so make this work?
I have tried to add a width to the div my table sits in but it just extends it without altering the table body or head
here is the code:
<div className="tableContainer">
<h1> Table </h1>
<table className="ui striped table">
<thead>
<tr>
<th className="headings">Ranks</th>
<th className="headings">Name</th>
<th className="headings">P</th>
<th className="headings">W</th>
<th className="headings">L</th>
</tr>
</thead>
<tbody>
{this.props.players.sort(function(a, b) {
return (a.rank) - (b.rank);
}).map(function(player, index) {
index +=1;
return <tr key={index} className="table-rows">
<td className="stats">{player.rank}</td>
<td className="stats">{player.name}</td>
<td className="stats">{player.played}</td>
<td className="stats">{player.wins}</td>
<td className="stats">{player.losses}</td>
</tr>
}, this)}
</tbody>
</table>
</div>
If you are working in Reactjs, you should use Semantic-UI's reactjs package: Semantic-UI React. In the Table section, you can see that certain properties are passed through props. You can set the column number with columns prop. And under the Table.Header tab, you can see that there's a className prop. You can use it to style your header. For reference, visit: Semantic-UI React Table.
I have a specific table to display.
It displays an array of objects.
My object contains:
common data (displayed in black in the table)
'income' specific data (displayed in red in the table)
'depense' specific data (displayed in green in the table)
I did something that looks like what I want but I'm not sure I did it in the clean way.
plunkr
<table border=1>
<thead>
<tr>
<th></th>
<th colspan=5>Depense</th>
<th colspan=5>Income</th>
</tr>
<tr>
<th rowspan=2> id invoice</th>
<th>title1</th>
<th>title2</th>
<th>title3</th>
<th>title4</th>
<th>title5</th>
<th>title6</th>
<th>title7</th>
<th>title8</th>
<th>title9</th>
<th>title10</th>
</tr>
<tr>
<th>depense1</th>
<th>depense2</th>
<th>depense3</th>
<th>depense4</th>
<th>depense5</th>
<th>income1</th>
<th>income2</th>
<th>income3</th>
<th>income4</th>
<th>income5</th>
</tr>
</thead>
<tbody>
<tr >
<td rowspan=2>id invoice : 10</td>
<td>10/02/2015</td>
<td>tartenpion</td>
<td>II</td>
<td>AA</td>
<td>1.25</td>
<td>FRED</td>
<td>fact 12</td>
<td>10</td>
<td>13</td>
<td>xx</td>
</tr>
<tr>
<td>avoir1</td>
<td>avoir2</td>
<td>avoir3</td>
<td>avoir4</td>
<td>avoir5</td>
<td>vente1</td>
<td>vente2</td>
<td>vente3</td>
<td>vente4</td>
<td>vente5</td>
</tr>
</tbody>
</table>
Plus : in order to display each record on two rows I had to add a column called "id invoice", then as I don't want it to be display I added some css to hide it.
I am pretty sure my code is dirty, but I don't know how to do that another way.
If someone can help me on this...
How to select table rows excluding first row. Number of table rows could vary.
Here is example:
<table id="grdVerzekeringen" >
<tr>
<th>First name</th><th>Last name</th>
</tr>
<tr>
<td>Pera</td><td>Peric</td>
</tr>
<tr>
<td>Mika</td><td>Mikic</td>
</tr>
<tr>
<td>Zika</td><td>Zikic</td>
</tr>
</table>
In this example I want to select table rows that have actual data not header data. I could use css selectors or XPath.
If the header row uses th, you are lucky. Just use the following XPath expression:
table[#id="grdVerzekeringen"]/tr[td]
If the header uses td as well, you can use the position() function:
table[#id="..."]/tr[position()>1]