Center in bootstrap in double header table
0
Hello i have a table and i want to center a th between two other th.
I want to change the position of th Vieillesse de base to be displayed in the center of Provisionnel and Régularisation.
Here my HTML :
<div class="row mt-1">
<div class="col-12">
<table class="table table-striped table-adjust ">
<thead class="cordonnes-cabinet">
<tr>
<th scope="col">Date</th>
<th scope="col" style="text-align:center" colspan="2">Vieillesse de base</th>
<th scope="col" style="text-align:right">Complémentaire</th>
<th scope="col" style="text-align:right">Total</th>
</tr>
<tr>
<th scope="col">...</th>
<th scope="col" style="text-align:right">Provisionnel</th>
<th scope="col" style="text-align:right">Régularisation</th>
<th scope="col" style="text-align:right">...</th>
<th scope="col" style="text-align:right">...</th>
</tr>
</thead>
<tbody class="cordonnes-cabinet">
@for (int i = 0; i < echeancierGeneriqueAjustee.Count; i++)
{
<tr>
<th style="font-weight:100">@(echeancierGeneriqueAjustee[i]["Date"])</th>
<td style="text-align:right">@(echeancierGeneriqueAjustee[i]["MontantProv"])</td>
<td style="text-align:right">@(echeancierGeneriqueAjustee[i]["MontantRegul"])</td>
<td style="text-align:right">@(echeancierGeneriqueAjustee[i]["MontantComplement"])</td>
<td style="text-align:right">@(echeancierGeneriqueAjustee[i]["TotalEcheance"])</td>
</tr>
}
<tr>
<th style="font-size:14px">Total</th>
<td style="text-align:right">@(echeancierGeneriqueAjustee[0]["TotalProv"])</td>
<td style="text-align:right">@(echeancierGeneriqueAjustee[0]["TotalRegul"])</td>
<td style="text-align:right">@(echeancierGeneriqueAjustee[0]["TotalComplement"])</td>
<td style="text-align:right">@(echeancierGeneriqueAjustee[0]["Total"])</td>
</tr>
</tbody>
</table>
</div>
</div>html css bootstrap-4
asked Nov 22 '18 at 15:06
mecabpazzo95mecabpazzo95
246
add a comment |
0
Hello i have a table and i want to center a th between two other th.
I want to change the position of th Vieillesse de base to be displayed in the center of Provisionnel and Régularisation.
Here my HTML :
<div class="row mt-1">
<div class="col-12">
<table class="table table-striped table-adjust ">
<thead class="cordonnes-cabinet">
<tr>
<th scope="col">Date</th>
<th scope="col" style="text-align:center" colspan="2">Vieillesse de base</th>
<th scope="col" style="text-align:right">Complémentaire</th>
<th scope="col" style="text-align:right">Total</th>
</tr>
<tr>
<th scope="col">...</th>
<th scope="col" style="text-align:right">Provisionnel</th>
<th scope="col" style="text-align:right">Régularisation</th>
<th scope="col" style="text-align:right">...</th>
<th scope="col" style="text-align:right">...</th>
</tr>
</thead>
<tbody class="cordonnes-cabinet">
@for (int i = 0; i < echeancierGeneriqueAjustee.Count; i++)
{
<tr>
<th style="font-weight:100">@(echeancierGeneriqueAjustee[i]["Date"])</th>
<td style="text-align:right">@(echeancierGeneriqueAjustee[i]["MontantProv"])</td>
<td style="text-align:right">@(echeancierGeneriqueAjustee[i]["MontantRegul"])</td>
<td style="text-align:right">@(echeancierGeneriqueAjustee[i]["MontantComplement"])</td>
<td style="text-align:right">@(echeancierGeneriqueAjustee[i]["TotalEcheance"])</td>
</tr>
}
<tr>
<th style="font-size:14px">Total</th>
<td style="text-align:right">@(echeancierGeneriqueAjustee[0]["TotalProv"])</td>
<td style="text-align:right">@(echeancierGeneriqueAjustee[0]["TotalRegul"])</td>
<td style="text-align:right">@(echeancierGeneriqueAjustee[0]["TotalComplement"])</td>
<td style="text-align:right">@(echeancierGeneriqueAjustee[0]["Total"])</td>
</tr>
</tbody>
</table>
</div>
</div>html css bootstrap-4
asked Nov 22 '18 at 15:06
mecabpazzo95mecabpazzo95
246
Are you wanting it centred to the gap between the two headings? if so you cannot do that with css - you would need some js to calculate the width of that space and then centre it to that width
– Pete
Nov 22 '18 at 15:23
Here is my example: jsfiddle.net/p1n7wu3x/3 it needs the table layout to be fixed and widths assigned to the columns
– Pete
Nov 22 '18 at 15:32
@Pete i don't want to use js
– mecabpazzo95
Nov 22 '18 at 15:39
Then you cannot do this and the best you can do is to left align the provisional title
– Pete
Nov 22 '18 at 15:41
add a comment |
0
0
0
Hello i have a table and i want to center a th between two other th.
I want to change the position of th Vieillesse de base to be displayed in the center of Provisionnel and Régularisation.
Here my HTML :
<div class="row mt-1">
<div class="col-12">
<table class="table table-striped table-adjust ">
<thead class="cordonnes-cabinet">
<tr>
<th scope="col">Date</th>
<th scope="col" style="text-align:center" colspan="2">Vieillesse de base</th>
<th scope="col" style="text-align:right">Complémentaire</th>
<th scope="col" style="text-align:right">Total</th>
</tr>
<tr>
<th scope="col">...</th>
<th scope="col" style="text-align:right">Provisionnel</th>
<th scope="col" style="text-align:right">Régularisation</th>
<th scope="col" style="text-align:right">...</th>
<th scope="col" style="text-align:right">...</th>
</tr>
</thead>
<tbody class="cordonnes-cabinet">
@for (int i = 0; i < echeancierGeneriqueAjustee.Count; i++)
{
<tr>
<th style="font-weight:100">@(echeancierGeneriqueAjustee[i]["Date"])</th>
<td style="text-align:right">@(echeancierGeneriqueAjustee[i]["MontantProv"])</td>
<td style="text-align:right">@(echeancierGeneriqueAjustee[i]["MontantRegul"])</td>
<td style="text-align:right">@(echeancierGeneriqueAjustee[i]["MontantComplement"])</td>
<td style="text-align:right">@(echeancierGeneriqueAjustee[i]["TotalEcheance"])</td>
</tr>
}
<tr>
<th style="font-size:14px">Total</th>
<td style="text-align:right">@(echeancierGeneriqueAjustee[0]["TotalProv"])</td>
<td style="text-align:right">@(echeancierGeneriqueAjustee[0]["TotalRegul"])</td>
<td style="text-align:right">@(echeancierGeneriqueAjustee[0]["TotalComplement"])</td>
<td style="text-align:right">@(echeancierGeneriqueAjustee[0]["Total"])</td>
</tr>
</tbody>
</table>
</div>
</div>html css bootstrap-4
asked Nov 22 '18 at 15:06
mecabpazzo95mecabpazzo95
246
Hello i have a table and i want to center a th between two other th.
I want to change the position of th Vieillesse de base to be displayed in the center of Provisionnel and Régularisation.
Here my HTML :
<div class="row mt-1">
<div class="col-12">
<table class="table table-striped table-adjust ">
<thead class="cordonnes-cabinet">
<tr>
<th scope="col">Date</th>
<th scope="col" style="text-align:center" colspan="2">Vieillesse de base</th>
<th scope="col" style="text-align:right">Complémentaire</th>
<th scope="col" style="text-align:right">Total</th>
</tr>
<tr>
<th scope="col">...</th>
<th scope="col" style="text-align:right">Provisionnel</th>
<th scope="col" style="text-align:right">Régularisation</th>
<th scope="col" style="text-align:right">...</th>
<th scope="col" style="text-align:right">...</th>
</tr>
</thead>
<tbody class="cordonnes-cabinet">
@for (int i = 0; i < echeancierGeneriqueAjustee.Count; i++)
{
<tr>
<th style="font-weight:100">@(echeancierGeneriqueAjustee[i]["Date"])</th>
<td style="text-align:right">@(echeancierGeneriqueAjustee[i]["MontantProv"])</td>
<td style="text-align:right">@(echeancierGeneriqueAjustee[i]["MontantRegul"])</td>
<td style="text-align:right">@(echeancierGeneriqueAjustee[i]["MontantComplement"])</td>
<td style="text-align:right">@(echeancierGeneriqueAjustee[i]["TotalEcheance"])</td>
</tr>
}
<tr>
<th style="font-size:14px">Total</th>
<td style="text-align:right">@(echeancierGeneriqueAjustee[0]["TotalProv"])</td>
<td style="text-align:right">@(echeancierGeneriqueAjustee[0]["TotalRegul"])</td>
<td style="text-align:right">@(echeancierGeneriqueAjustee[0]["TotalComplement"])</td>
<td style="text-align:right">@(echeancierGeneriqueAjustee[0]["Total"])</td>
</tr>
</tbody>
</table>
</div>
</div><div class="row mt-1">
<div class="col-12">
<table class="table table-striped table-adjust ">
<thead class="cordonnes-cabinet">
<tr>
<th scope="col">Date</th>
<th scope="col" style="text-align:center" colspan="2">Vieillesse de base</th>
<th scope="col" style="text-align:right">Complémentaire</th>
<th scope="col" style="text-align:right">Total</th>
</tr>
<tr>
<th scope="col">...</th>
<th scope="col" style="text-align:right">Provisionnel</th>
<th scope="col" style="text-align:right">Régularisation</th>
<th scope="col" style="text-align:right">...</th>
<th scope="col" style="text-align:right">...</th>
</tr>
</thead>
<tbody class="cordonnes-cabinet">
@for (int i = 0; i < echeancierGeneriqueAjustee.Count; i++)
{
<tr>
<th style="font-weight:100">@(echeancierGeneriqueAjustee[i]["Date"])</th>
<td style="text-align:right">@(echeancierGeneriqueAjustee[i]["MontantProv"])</td>
<td style="text-align:right">@(echeancierGeneriqueAjustee[i]["MontantRegul"])</td>
<td style="text-align:right">@(echeancierGeneriqueAjustee[i]["MontantComplement"])</td>
<td style="text-align:right">@(echeancierGeneriqueAjustee[i]["TotalEcheance"])</td>
</tr>
}
<tr>
<th style="font-size:14px">Total</th>
<td style="text-align:right">@(echeancierGeneriqueAjustee[0]["TotalProv"])</td>
<td style="text-align:right">@(echeancierGeneriqueAjustee[0]["TotalRegul"])</td>
<td style="text-align:right">@(echeancierGeneriqueAjustee[0]["TotalComplement"])</td>
<td style="text-align:right">@(echeancierGeneriqueAjustee[0]["Total"])</td>
</tr>
</tbody>
</table>
</div>
</div><div class="row mt-1">
<div class="col-12">
<table class="table table-striped table-adjust ">
<thead class="cordonnes-cabinet">
<tr>
<th scope="col">Date</th>
<th scope="col" style="text-align:center" colspan="2">Vieillesse de base</th>
<th scope="col" style="text-align:right">Complémentaire</th>
<th scope="col" style="text-align:right">Total</th>
</tr>
<tr>
<th scope="col">...</th>
<th scope="col" style="text-align:right">Provisionnel</th>
<th scope="col" style="text-align:right">Régularisation</th>
<th scope="col" style="text-align:right">...</th>
<th scope="col" style="text-align:right">...</th>
</tr>
</thead>
<tbody class="cordonnes-cabinet">
@for (int i = 0; i < echeancierGeneriqueAjustee.Count; i++)
{
<tr>
<th style="font-weight:100">@(echeancierGeneriqueAjustee[i]["Date"])</th>
<td style="text-align:right">@(echeancierGeneriqueAjustee[i]["MontantProv"])</td>
<td style="text-align:right">@(echeancierGeneriqueAjustee[i]["MontantRegul"])</td>
<td style="text-align:right">@(echeancierGeneriqueAjustee[i]["MontantComplement"])</td>
<td style="text-align:right">@(echeancierGeneriqueAjustee[i]["TotalEcheance"])</td>
</tr>
}
<tr>
<th style="font-size:14px">Total</th>
<td style="text-align:right">@(echeancierGeneriqueAjustee[0]["TotalProv"])</td>
<td style="text-align:right">@(echeancierGeneriqueAjustee[0]["TotalRegul"])</td>
<td style="text-align:right">@(echeancierGeneriqueAjustee[0]["TotalComplement"])</td>
<td style="text-align:right">@(echeancierGeneriqueAjustee[0]["Total"])</td>
</tr>
</tbody>
</table>
</div>
</div>html css bootstrap-4
html css bootstrap-4
asked Nov 22 '18 at 15:06
mecabpazzo95mecabpazzo95
246
asked Nov 22 '18 at 15:06
mecabpazzo95mecabpazzo95
246
edited Nov 23 '18 at 9:15
mecabpazzo95
asked Nov 22 '18 at 15:06
mecabpazzo95mecabpazzo95
246
asked Nov 22 '18 at 15:06
mecabpazzo95mecabpazzo95
246
asked Nov 22 '18 at 15:06
mecabpazzo95mecabpazzo95
246
246
Are you wanting it centred to the gap between the two headings? if so you cannot do that with css - you would need some js to calculate the width of that space and then centre it to that width
– Pete
Nov 22 '18 at 15:23
Here is my example: jsfiddle.net/p1n7wu3x/3 it needs the table layout to be fixed and widths assigned to the columns
– Pete
Nov 22 '18 at 15:32
@Pete i don't want to use js
– mecabpazzo95
Nov 22 '18 at 15:39
Then you cannot do this and the best you can do is to left align the provisional title
– Pete
Nov 22 '18 at 15:41
add a comment |
Are you wanting it centred to the gap between the two headings? if so you cannot do that with css - you would need some js to calculate the width of that space and then centre it to that width
– Pete
Nov 22 '18 at 15:23
Here is my example: jsfiddle.net/p1n7wu3x/3 it needs the table layout to be fixed and widths assigned to the columns
– Pete
Nov 22 '18 at 15:32
@Pete i don't want to use js
– mecabpazzo95
Nov 22 '18 at 15:39
Then you cannot do this and the best you can do is to left align the provisional title
– Pete
Nov 22 '18 at 15:41
Are you wanting it centred to the gap between the two headings? if so you cannot do that with css - you would need some js to calculate the width of that space and then centre it to that width
– Pete
Nov 22 '18 at 15:23
Are you wanting it centred to the gap between the two headings? if so you cannot do that with css - you would need some js to calculate the width of that space and then centre it to that width
– Pete
Nov 22 '18 at 15:23
Here is my example: jsfiddle.net/p1n7wu3x/3 it needs the table layout to be fixed and widths assigned to the columns
– Pete
Nov 22 '18 at 15:32
Here is my example: jsfiddle.net/p1n7wu3x/3 it needs the table layout to be fixed and widths assigned to the columns
– Pete
Nov 22 '18 at 15:32
@Pete i don't want to use js
– mecabpazzo95
Nov 22 '18 at 15:39
@Pete i don't want to use js
– mecabpazzo95
Nov 22 '18 at 15:39
Then you cannot do this and the best you can do is to left align the provisional title
– Pete
Nov 22 '18 at 15:41
Then you cannot do this and the best you can do is to left align the provisional title
– Pete
Nov 22 '18 at 15:41
add a comment |
2 Answers
2
active
oldest
votes
0
The key to do this is use html colspan in the th, to simulate equality of width with the second row. Then you only need to use .text-center.
In you particular case, use colspan="2" in the second th
JS FIDDLE DEMO
<table class="table">
<thead class="cordonnes-cabinet">
<tr>
<th>Date</th>
<th colspan="2" class="text-center">Vieillesse de base</th>
<th>Complémentaire</th>
<th>Total</th>
</tr>
<tr>
<th style="width:10%">...</th>
<th class="text-center">Provisionnel</th>
<th class="text-center">Régularisation</th>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbbody>
<tr>
<th>col1</th>
<td class="text-center">col2</td>
<td class="text-center">col3</td>
<td>col4</td>
<td>col5</td>
</tr>
</tbbody>
</table>
answered Nov 22 '18 at 15:54
The.BearThe.Bear
3,22811124
add a comment |
0
So the issue here is that your text is centered but the Column to the right is X wide and creates a optical illusion that your column is a lot wider.
I would set the column saying "Complémentaire" to text-align: left with class text-left then it will create the illuion you want.
Ive attached a picture where you can see that your code actually centers the text its just an optical illuion
This is how it would look with left aligned in the blue column:
And now its just a question on how to make it pretier with paddings on the td's and th's
answered Nov 22 '18 at 15:23
NopzenNopzen
210313
so how can i prevent this optical illuion you said the column to the right x cause the optical illusion
– mecabpazzo95
Nov 22 '18 at 15:27
Try to update the page i've edited my awnser :)
– Nopzen
Nov 22 '18 at 15:28
so now how can i make it pretier ?
– mecabpazzo95
Nov 22 '18 at 15:29
I would add some paddings to the th's as a quick example: jsbin.com/yutixasuwa/edit?html,css,output
– Nopzen
Nov 22 '18 at 15:34
for me it is not working correctly again maybe th cause the css !?
– mecabpazzo95
Nov 22 '18 at 15:41
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53433761%2fcenter-th-in-bootstrap-in-double-header-table%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
The key to do this is use html colspan in the th, to simulate equality of width with the second row. Then you only need to use .text-center.
In you particular case, use colspan="2" in the second th
JS FIDDLE DEMO
<table class="table">
<thead class="cordonnes-cabinet">
<tr>
<th>Date</th>
<th colspan="2" class="text-center">Vieillesse de base</th>
<th>Complémentaire</th>
<th>Total</th>
</tr>
<tr>
<th style="width:10%">...</th>
<th class="text-center">Provisionnel</th>
<th class="text-center">Régularisation</th>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbbody>
<tr>
<th>col1</th>
<td class="text-center">col2</td>
<td class="text-center">col3</td>
<td>col4</td>
<td>col5</td>
</tr>
</tbbody>
</table>
answered Nov 22 '18 at 15:54
The.BearThe.Bear
3,22811124
add a comment |
0
The key to do this is use html colspan in the th, to simulate equality of width with the second row. Then you only need to use .text-center.
In you particular case, use colspan="2" in the second th
JS FIDDLE DEMO
<table class="table">
<thead class="cordonnes-cabinet">
<tr>
<th>Date</th>
<th colspan="2" class="text-center">Vieillesse de base</th>
<th>Complémentaire</th>
<th>Total</th>
</tr>
<tr>
<th style="width:10%">...</th>
<th class="text-center">Provisionnel</th>
<th class="text-center">Régularisation</th>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbbody>
<tr>
<th>col1</th>
<td class="text-center">col2</td>
<td class="text-center">col3</td>
<td>col4</td>
<td>col5</td>
</tr>
</tbbody>
</table>
answered Nov 22 '18 at 15:54
The.BearThe.Bear
3,22811124
add a comment |
0
0
0
The key to do this is use html colspan in the th, to simulate equality of width with the second row. Then you only need to use .text-center.
In you particular case, use colspan="2" in the second th
JS FIDDLE DEMO
<table class="table">
<thead class="cordonnes-cabinet">
<tr>
<th>Date</th>
<th colspan="2" class="text-center">Vieillesse de base</th>
<th>Complémentaire</th>
<th>Total</th>
</tr>
<tr>
<th style="width:10%">...</th>
<th class="text-center">Provisionnel</th>
<th class="text-center">Régularisation</th>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbbody>
<tr>
<th>col1</th>
<td class="text-center">col2</td>
<td class="text-center">col3</td>
<td>col4</td>
<td>col5</td>
</tr>
</tbbody>
</table>
answered Nov 22 '18 at 15:54
The.BearThe.Bear
3,22811124
The key to do this is use html colspan in the th, to simulate equality of width with the second row. Then you only need to use .text-center.
In you particular case, use colspan="2" in the second th
JS FIDDLE DEMO
<table class="table">
<thead class="cordonnes-cabinet">
<tr>
<th>Date</th>
<th colspan="2" class="text-center">Vieillesse de base</th>
<th>Complémentaire</th>
<th>Total</th>
</tr>
<tr>
<th style="width:10%">...</th>
<th class="text-center">Provisionnel</th>
<th class="text-center">Régularisation</th>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbbody>
<tr>
<th>col1</th>
<td class="text-center">col2</td>
<td class="text-center">col3</td>
<td>col4</td>
<td>col5</td>
</tr>
</tbbody>
</table>
answered Nov 22 '18 at 15:54
The.BearThe.Bear
3,22811124
answered Nov 22 '18 at 15:54
The.BearThe.Bear
3,22811124
answered Nov 22 '18 at 15:54
The.BearThe.Bear
3,22811124
answered Nov 22 '18 at 15:54
The.BearThe.Bear
3,22811124
3,22811124
add a comment |
add a comment |
0
So the issue here is that your text is centered but the Column to the right is X wide and creates a optical illusion that your column is a lot wider.
I would set the column saying "Complémentaire" to text-align: left with class text-left then it will create the illuion you want.
Ive attached a picture where you can see that your code actually centers the text its just an optical illuion
This is how it would look with left aligned in the blue column:
And now its just a question on how to make it pretier with paddings on the td's and th's
answered Nov 22 '18 at 15:23
NopzenNopzen
210313
so how can i prevent this optical illuion you said the column to the right x cause the optical illusion
– mecabpazzo95
Nov 22 '18 at 15:27
Try to update the page i've edited my awnser :)
– Nopzen
Nov 22 '18 at 15:28
so now how can i make it pretier ?
– mecabpazzo95
Nov 22 '18 at 15:29
I would add some paddings to the th's as a quick example: jsbin.com/yutixasuwa/edit?html,css,output
– Nopzen
Nov 22 '18 at 15:34
for me it is not working correctly again maybe th cause the css !?
– mecabpazzo95
Nov 22 '18 at 15:41
add a comment |
0
So the issue here is that your text is centered but the Column to the right is X wide and creates a optical illusion that your column is a lot wider.
I would set the column saying "Complémentaire" to text-align: left with class text-left then it will create the illuion you want.
Ive attached a picture where you can see that your code actually centers the text its just an optical illuion
This is how it would look with left aligned in the blue column:
And now its just a question on how to make it pretier with paddings on the td's and th's
answered Nov 22 '18 at 15:23
NopzenNopzen
210313
so how can i prevent this optical illuion you said the column to the right x cause the optical illusion
– mecabpazzo95
Nov 22 '18 at 15:27
Try to update the page i've edited my awnser :)
– Nopzen
Nov 22 '18 at 15:28
so now how can i make it pretier ?
– mecabpazzo95
Nov 22 '18 at 15:29
I would add some paddings to the th's as a quick example: jsbin.com/yutixasuwa/edit?html,css,output
– Nopzen
Nov 22 '18 at 15:34
for me it is not working correctly again maybe th cause the css !?
– mecabpazzo95
Nov 22 '18 at 15:41
add a comment |
0
0
0
So the issue here is that your text is centered but the Column to the right is X wide and creates a optical illusion that your column is a lot wider.
I would set the column saying "Complémentaire" to text-align: left with class text-left then it will create the illuion you want.
Ive attached a picture where you can see that your code actually centers the text its just an optical illuion
This is how it would look with left aligned in the blue column:
And now its just a question on how to make it pretier with paddings on the td's and th's
answered Nov 22 '18 at 15:23
NopzenNopzen
210313
So the issue here is that your text is centered but the Column to the right is X wide and creates a optical illusion that your column is a lot wider.
I would set the column saying "Complémentaire" to text-align: left with class text-left then it will create the illuion you want.
Ive attached a picture where you can see that your code actually centers the text its just an optical illuion
This is how it would look with left aligned in the blue column:
And now its just a question on how to make it pretier with paddings on the td's and th's
answered Nov 22 '18 at 15:23
NopzenNopzen
210313
answered Nov 22 '18 at 15:23
NopzenNopzen
210313
answered Nov 22 '18 at 15:23
NopzenNopzen
210313
answered Nov 22 '18 at 15:23
NopzenNopzen
210313
210313
so how can i prevent this optical illuion you said the column to the right x cause the optical illusion
– mecabpazzo95
Nov 22 '18 at 15:27
Try to update the page i've edited my awnser :)
– Nopzen
Nov 22 '18 at 15:28
so now how can i make it pretier ?
– mecabpazzo95
Nov 22 '18 at 15:29
I would add some paddings to the th's as a quick example: jsbin.com/yutixasuwa/edit?html,css,output
– Nopzen
Nov 22 '18 at 15:34
for me it is not working correctly again maybe th cause the css !?
– mecabpazzo95
Nov 22 '18 at 15:41
add a comment |
so how can i prevent this optical illuion you said the column to the right x cause the optical illusion
– mecabpazzo95
Nov 22 '18 at 15:27
Try to update the page i've edited my awnser :)
– Nopzen
Nov 22 '18 at 15:28
so now how can i make it pretier ?
– mecabpazzo95
Nov 22 '18 at 15:29
I would add some paddings to the th's as a quick example: jsbin.com/yutixasuwa/edit?html,css,output
– Nopzen
Nov 22 '18 at 15:34
for me it is not working correctly again maybe th cause the css !?
– mecabpazzo95
Nov 22 '18 at 15:41
so how can i prevent this optical illuion you said the column to the right x cause the optical illusion
– mecabpazzo95
Nov 22 '18 at 15:27
so how can i prevent this optical illuion you said the column to the right x cause the optical illusion
– mecabpazzo95
Nov 22 '18 at 15:27
Try to update the page i've edited my awnser :)
– Nopzen
Nov 22 '18 at 15:28
Try to update the page i've edited my awnser :)
– Nopzen
Nov 22 '18 at 15:28
so now how can i make it pretier ?
– mecabpazzo95
Nov 22 '18 at 15:29
so now how can i make it pretier ?
– mecabpazzo95
Nov 22 '18 at 15:29
I would add some paddings to the th's as a quick example: jsbin.com/yutixasuwa/edit?html,css,output
– Nopzen
Nov 22 '18 at 15:34
I would add some paddings to the th's as a quick example: jsbin.com/yutixasuwa/edit?html,css,output
– Nopzen
Nov 22 '18 at 15:34
for me it is not working correctly again maybe th cause the css !?
– mecabpazzo95
Nov 22 '18 at 15:41
for me it is not working correctly again maybe th cause the css !?
– mecabpazzo95
Nov 22 '18 at 15:41
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53433761%2fcenter-th-in-bootstrap-in-double-header-table%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Are you wanting it centred to the gap between the two headings? if so you cannot do that with css - you would need some js to calculate the width of that space and then centre it to that width
– Pete
Nov 22 '18 at 15:23
Here is my example: jsfiddle.net/p1n7wu3x/3 it needs the table layout to be fixed and widths assigned to the columns
– Pete
Nov 22 '18 at 15:32
@Pete i don't want to use js
– mecabpazzo95
Nov 22 '18 at 15:39
Then you cannot do this and the best you can do is to left align the provisional title
– Pete
Nov 22 '18 at 15:41