I'm new to html and I'm working on designing my website. I made a table that WAS center aligned until I put a scroll bar on it. Now I can't get the table to center align unless I take out the scroll bar. I'll show you what I have so far:
<div style="overflow: auto; height: 86px; width: 750px;">
<table
style="height: 86px; margin-left: auto; margin-right: auto; width: 750px; text-align: left;"
border-style:="" hidden;="" cellpadding="2" cellspacing="2">
<tbody>
TABLE CONTENT with multiple rows and two columns.
</tbody>
</table>
</div>
I tried several different approaches and still no luck. It seems like it shouldn't be this hard, so I figure I'm overlooking some small but important detail. Any help would greatly be appreciated.
Move the "margin-left: auto; margin-right: auto" styles to the div instead of the table. Also, your div and table are the same size, so there won't be a scrollbar.
<div style="overflow: auto; height: 86px; width: 500px;margin-left: auto; margin-right: auto; ">
<table style="height: 86px; width: 750px; text-align: left;" border-style:="" hidden;="" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td>1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 </td>
<td>2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 </td>
</tr>
<tr>
<td>3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 </td>
<td>4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 </td>
</tr>
</tbody>
</table>
</div
Related
I want to display a kind of competitions results table. Each row has a participant name, followed by several cells representing participant results in last competitions (say, the competitions take place once per week). Something like this:
User name Aug 1 Aug 8 Aug 15
John Doe 1 10 100
Jane Doe 100 10 1
The table may become very wide if many columns are present. In such a case, I want the oldest columns to be hidden, so that only a few most recent are visible, and the table does not overflow the available space. The user name columns should always be visible.
The "borderline" cells can be "cut" like this:
User name g 1 Aug 8 Aug 15
John Doe 1 10 100
Jane Doe 00 10 1
...or they can be completely invisible, both variants are acceptable to me.
It is possible to achieve this with pure css?
For just one line, I've achieved it without a table, using display: flex together with direction: rtl for the 'columns' only:
https://jsfiddle.net/fo2Ldk3n/
.outer {
width: 350px;
display: flex;
justify-content: flex-right;
border: 1px solid black;
}
.header {
white-space: nowrap;
margin-right: 10px;
}
.line-box {
direction: rtl;
overflow: hidden;
white-space: nowrap;
}
.line {
padding-right: 10px;
display: inline;
white-space: nowrap;
}
<div class="outer">
<div class="header">
User Name
</div>
<div class="line-box">
<div class="line">
2223 +1
</div>
<div class="line">
10
</div>
<div class="line">
100
</div>
<div class="line">
1
</div>
<div class="line">
10
</div>
<div class="line">
100
</div>
<div class="line">
1
</div>
<div class="line">
10
</div>
<div class="line">
100
</div>
<div class="line">
1
</div>
</div>
</div>
However, this obviously fails for several rows, because the numbers will not be aligned into columns:
I've tried to use colgroup and set display: rtl etc. for the results col, but it would not work.
Also note that direction: rtl results in wrong order of 'words' within a cell (see 1+ 2223, which should be 2223 +1). The latter is not really a big problem, as I will mostly have only numbers in the cells, so it's ok if the solution has this problem. But it'll be better if it does not.
I've got it. The key is to use table wrapped into div with direction: rtl, this gives cells going from right to left and overflowing to the left. And use position: absolute for user names.
An additional direction: ltr on td even makes cell content render in correct direction.
.outer {
width: 300px;
border: 1px solid black;
position: relative;
direction: rtl;
overflow: hidden;
}
.table {
white-space: nowrap;
}
.row td {
direction: ltr;
}
.header {
position: absolute;
left: 0;
background: white;
padding-right: 10px;
}
<div class="outer">
<table class="table">
<tr class="row">
<td>1 + 100</td>
<td>100</td>
<td>1000</td>
<td>1</td>
<td>10</td>
<td>100</td>
<td>1000</td>
<td>1</td>
<td>100</td>
<td>1000</td>
<td>1</td>
<td>10</td>
<td>100</td>
<td>1000</td>
<td>1</td>
<td>10</td>
<td>100</td>
<td>1000</td>
<td class="header">User name</td>
</tr>
<tr class="row">
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>10</td>
<td>100</td>
<td>1000</td>
<td>1</td>
<td>100</td>
<td>1000</td>
<td>1</td>
<td>10</td>
<td>100</td>
<td>1000</td>
<td>1</td>
<td>10</td>
<td>100</td>
<td>1000</td>
<td class="header">Long long user name</td>
</tr>
</table>
</div>
The user name cells have different widths, but this seems to me.
This question already has answers here:
Can you align text by a symbol in it?
(2 answers)
Aligning text on a specific character
(7 answers)
Closed 2 years ago.
I have the following HTML snippet
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
<tr>
...
<td style="text-align:center;">
abcdefghij abcdefgh<br>
AB hello<br>
XYZ hi
</td>
...
</tr>
</table>
</body>
</html>
It outputs the following:
abcdefghij abcdefgh
AB hello
XYZ hi
I would like it to output following:
abcdefghij abcdefgh
AB hello
XYZ hi
How do I go about doing that without modifying the rest of the table?
We can assume that the left and parts can be at most 10 characters each.
If it helps, the HTML is generated via JavaScript.
I don't think there's a way to align that without adding included to the posts alone. If there are any, I don't know. It would be more accurate to follow a path this way.
tr td {
display: flex;
flex-direction: column;
}
tr td div {
display: flex;
}
tr td div>span {
flex: 0 0 50%;
}
tr td div>span:nth-of-type(2) {
text-align: left;
}
tr td div>span:nth-of-type(1) {
text-align: right;
margin-right: 8px;
}
<table>
<tr>
...
<td style="text-align:center;">
<div>
<span> abcdefghij </span>
<span>abcdefgh</span>
</div>
<div>
<span>AB </span>
<span>hello</span>
</div>
<div>
<span>XYZ </span>
<span>hi</span>
</div>
</td>
...
</tr>
</table>
I have an array in a component file that will by dynamically updated based on a database query. I need this array to be populating the contents of a table like this:
For an array of 7 items:
---------------------------------------------
| array[0] | array[1] | array[2] | array[3] |
---------------------------------------------
| array[4] | array[5] | array[6] |
----------------------------------
I have this method so far:
HTML:
<table>
<ng-container *ngFor="let employer of businessAdmins">
<tr>
<div class="card shadow m-2" style="height:25vh;width:18.75vh;border-radius:5%;overflow:hidden;">
<div class="ml-1"><div style="font-weight:bold">Name: </div>{{employer.data().first_name + " " + employer.data().last_name}}</div>
</div>
</tr>
</ng-container>
</table>
This works fine in producing a list of cells however I do not know how to populate them horizontally until there are 4 horizontal cells and then move on to the next line.
It is very simple with CSS flex box. Try this code -
HTML
<div class="table">
<ng-container *ngFor="let employer of businessAdmins">
<div class="card shadow">
<div style="font-weight:bold">
Name: {{employer.data().first_name + " " + employer.data().last_name}}
</div>
</div>
</ng-container>
</div>
CSS
.table {
display: flex;
flex-wrap: wrap;
width: 100%;
.card {
flex: 1 0 25%;
}
}
Result-
You can do something like this (manually) as I was not able to find the "step" in *ngFor so far (I've simplified your employer as simple string).
I don't like it as it's not using any advantage of the framework and we are scanning the list/array even if we don't need every element (performance issue).
<table>
<ng-container *ngFor="let employer of businessAdmins; let i = index">
<tr *ngIf="i % 4 == 0">
<td> {{ businessAdmins[i] }} </td>
<td *ngIf="businessAdmins[i+1]"> {{ businessAdmins[i+1] }} </td>
<td *ngIf="businessAdmins[i+2]"> {{ businessAdmins[i+2] }} </td>
<td *ngIf="businessAdmins[i+3]"> {{ businessAdmins[i+3] }} </td>
</tr>
</ng-container>
</table>
You can acheive it with flex box.
flexbox
td {
width: 20%;
background-color: aqua;
border: 1px solid black;
}
tr {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
height: 100%;
}
table {
width: 40vw;
margin: 30px
}
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>
Hy guys! !I have this image:
I want to resize the first column to the minimum size and the others must cover the maximum width of the page. I'll try in this way, here is my css code:
/* generic style*/
table, td, th {
border: solid# CCC;border - width: 1 px 0;border - collapse: collapse
}
.check {
padding: 5 px 0 px;width: 1000 px
}
.name {
padding: 5 px 100 px;width: 1000 px
}
.family {
padding: 5 px 40 px;width: 1000 px
}
.productCode {
padding: 5 px 30 px;width: 1000 px
}
.descr {
padding: 5 px 20 px;width: 1000 px
}
td {
padding: 5 px 0 px;width: 1000 px
}
/* fixed header */
div.tablewrap {
position: relative;width: 1000 px;padding - top: 20 px
}
div.tablewrap - inner {
width: 1000 px;height: 230 px;overflow: auto
}
div.tablewrap thead tr {
position: absolute;top: -3 px
}
Here is my html code:
<div class="tablewrap">
<div class="tablewrap-inner">
<div ng-controller="ctrlRead">
<table class="table table-hover" border="1">
<thead>
<tr>
<th class="check">
<input type="checkbox" onclick="checkAll(this)" />
</th>
<th class="name">Nome <a ng-click="sort_by('name')"><i class="icon-sort"></i></a></th>
<th class="family">Famiglia <a ng-click="sort_by('family')"><i class="icon-sort"></i></a></th>
<th class="productCode">Codice prodotto <a ng-click="sort_by('productCode')"><i class="icon-sort"></i></a></th>
<th class="descr">Descrizione <a ng-click="sort_by('description')"><i class="icon-sort"></i></a></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items | orderBy:sortingOrder:reverse " id="lista">
<td>
<input id="selectLine1" type="checkbox" value="{{item.check}}" />
</td>
<td>{{item.name}}</td>
<td>{{item.family}}</td>
<td>{{item.productCode}}</td>
<td>{{item.descr}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Please give me some hints!
in your css you have
.check{padding: 5px 0px;width:1000px}
you can change that width to width:100px or even less, resize to what suits you best
.check{padding: 5px 0px; width:100px}
I like to use <colgroup> and <col> for that.
Insert it directly after your table openings tag. (and delete all the width from your stylesheet)
<table>
<colgroup>
<col width="50px" />
<col span="4" width="*" />
</colgroup>
The first column will be 50px width, the four columns after it will have automatic width. Offcourse you can also set a width for every column separately.
Another benefit of these tags is that you can give all cells in a column the same class (with a simple demo):
<colgroup>
<col class="red" />
</colgroup>
How to make
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
</tr>
always printable on every page.
My View
<style>
#page { margin: 150px 50px; }
#header { position: fixed; left: 0px; top: -100px; right: 0px; height: 50px; text-align: center; }
#footer { position: fixed; left: 0px; bottom: -180px; right: 0px; height: 150px; text-align: center; }
#footer .page:after { content: counter(page, upper-roman); }
</style>
<div id="header">
<h1>Tittle</h1>
</div>
<div id="content">
<?php
echo"<table class='gridtable'>";
?>
<table width="100%" page-break-inside: auto;>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
</tr>
<?php
$num = 0;
foreach($result as $key=>$val){
$num++;
echo"<tr>
<td>".$a."</td>".
"<td>".$val['b']."</td>".
"<td>".$val['c']."</td>".
"<td>".$val['d']."</td>".
"<td>".$val['e']."</td>".
"</tr>";
}
?>
</table>
<?php
echo"</table>";
?>
</div>
<script type="text/php">
if ( isset($pdf) ) {
$font = Font_Metrics::get_font("helvetica", "bold");
$pdf->page_text(280, 780, "Page {PAGE_NUM} of {PAGE_COUNT}", $font, 10, array(0,0,0));
}
</script>
For Example, Here is my PDF after i downloaded
1st page :
| Title 1 | Tittle 2 | Tittle 3 |
| row 1 | row 1 | row 1 |
2nd page :
| row 2 | row 2 | row 2 |
How to make 2nd page like this :
| Title 1 | Tittle 2 | Tittle 3 |
| row 2 | row 2 | row 2 |
I want the Tittle always printed on top every page. Thank You
In recent versions of DOMPDF (e.g., version 0.5.2 or later, I believe), you can wrap your rows containing your table headers in a THEAD.
Change your view to:
<table width="100%" page-break-inside: auto;>
<thead>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
<th>e</th>
</tr>
<thead>
This should do the trick. There is one case where it fails: if your table is rendered so that it breaks after your thead but before any data rows are rendered, the thead will not show up on the next page. If the table breaks across yet another page, the thead will show up on the subsequent pages.