Center in bootstrap in double header table

up vote
0
down vote

favorite

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>

edited Nov 23 at 9:15

asked Nov 22 at 15:06

mecabpazzo95

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 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 at 15:32

@Pete i don't want to use js
– mecabpazzo95
Nov 22 at 15:39

Then you cannot do this and the best you can do is to left align the provisional title
– Pete
Nov 22 at 15:41

add a comment |

up vote
0
down vote

favorite

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>

edited Nov 23 at 9:15

asked Nov 22 at 15:06

mecabpazzo95

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 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 at 15:32

@Pete i don't want to use js
– mecabpazzo95
Nov 22 at 15:39

Then you cannot do this and the best you can do is to left align the provisional title
– Pete
Nov 22 at 15:41

add a comment |

up vote
0
down vote

favorite

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>

edited Nov 23 at 9:15

asked Nov 22 at 15:06

mecabpazzo95

246

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

edited Nov 23 at 9:15

asked Nov 22 at 15:06

mecabpazzo95

246

edited Nov 23 at 9:15

asked Nov 22 at 15:06

mecabpazzo95

246

edited Nov 23 at 9:15

asked Nov 22 at 15:06

mecabpazzo95

246

asked Nov 22 at 15:06

mecabpazzo95

246

asked Nov 22 at 15:06

mecabpazzo95

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 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 at 15:32

@Pete i don't want to use js
– mecabpazzo95
Nov 22 at 15:39

Then you cannot do this and the best you can do is to left align the provisional title
– Pete
Nov 22 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 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 at 15:32

@Pete i don't want to use js
– mecabpazzo95
Nov 22 at 15:39

Then you cannot do this and the best you can do is to left align the provisional title
– Pete
Nov 22 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 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 at 15:32

@Pete i don't want to use js
– mecabpazzo95
Nov 22 at 15:39

Then you cannot do this and the best you can do is to left align the provisional title
– Pete
Nov 22 at 15:41

add a comment |

2 Answers
2

active

oldest

votes

up vote
0
down vote

accepted

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 at 15:54

The.Bear

3,15811124

add a comment |

up vote
0
down vote

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 enter image description here

This is how it would look with left aligned in the blue column:
enter image description here

And now its just a question on how to make it pretier with paddings on the td's and th's

answered Nov 22 at 15:23

Nopzen

208313

so how can i prevent this optical illuion you said the column to the right x cause the optical illusion
– mecabpazzo95
Nov 22 at 15:27

Try to update the page i've edited my awnser :)
– Nopzen
Nov 22 at 15:28

so now how can i make it pretier ?
– mecabpazzo95
Nov 22 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 at 15:34

for me it is not working correctly again maybe th cause the css !?
– mecabpazzo95
Nov 22 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',
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');
});

Post as a guest

Name

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

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

up vote
0
down vote

accepted

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 at 15:54

The.Bear

3,15811124

add a comment |

up vote
0
down vote

accepted

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 at 15:54

The.Bear

3,15811124

add a comment |

up vote
0
down vote

accepted

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 at 15:54

The.Bear

3,15811124

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 at 15:54

The.Bear

3,15811124

answered Nov 22 at 15:54

The.Bear

3,15811124

answered Nov 22 at 15:54

The.Bear

3,15811124

answered Nov 22 at 15:54

The.Bear

3,15811124

add a comment |

up vote
0
down vote

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 enter image description here

This is how it would look with left aligned in the blue column:
enter image description here

And now its just a question on how to make it pretier with paddings on the td's and th's

answered Nov 22 at 15:23

Nopzen

208313

so how can i prevent this optical illuion you said the column to the right x cause the optical illusion
– mecabpazzo95
Nov 22 at 15:27

Try to update the page i've edited my awnser :)
– Nopzen
Nov 22 at 15:28

so now how can i make it pretier ?
– mecabpazzo95
Nov 22 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 at 15:34

for me it is not working correctly again maybe th cause the css !?
– mecabpazzo95
Nov 22 at 15:41

add a comment |

up vote
0
down vote

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 enter image description here

This is how it would look with left aligned in the blue column:
enter image description here

And now its just a question on how to make it pretier with paddings on the td's and th's

answered Nov 22 at 15:23

Nopzen

208313

so how can i prevent this optical illuion you said the column to the right x cause the optical illusion
– mecabpazzo95
Nov 22 at 15:27

Try to update the page i've edited my awnser :)
– Nopzen
Nov 22 at 15:28

so now how can i make it pretier ?
– mecabpazzo95
Nov 22 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 at 15:34

for me it is not working correctly again maybe th cause the css !?
– mecabpazzo95
Nov 22 at 15:41

add a comment |

up vote
0
down vote

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 enter image description here

This is how it would look with left aligned in the blue column:
enter image description here

And now its just a question on how to make it pretier with paddings on the td's and th's

answered Nov 22 at 15:23

Nopzen

208313

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 enter image description here

This is how it would look with left aligned in the blue column:
enter image description here

And now its just a question on how to make it pretier with paddings on the td's and th's

answered Nov 22 at 15:23

Nopzen

208313

answered Nov 22 at 15:23

Nopzen

208313

answered Nov 22 at 15:23

Nopzen

208313

answered Nov 22 at 15:23

Nopzen

208313

so how can i prevent this optical illuion you said the column to the right x cause the optical illusion
– mecabpazzo95
Nov 22 at 15:27

Try to update the page i've edited my awnser :)
– Nopzen
Nov 22 at 15:28

so now how can i make it pretier ?
– mecabpazzo95
Nov 22 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 at 15:34

for me it is not working correctly again maybe th cause the css !?
– mecabpazzo95
Nov 22 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 at 15:27

Try to update the page i've edited my awnser :)
– Nopzen
Nov 22 at 15:28

so now how can i make it pretier ?
– mecabpazzo95
Nov 22 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 at 15:34

for me it is not working correctly again maybe th cause the css !?
– mecabpazzo95
Nov 22 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 at 15:27

Try to update the page i've edited my awnser :)
– Nopzen
Nov 22 at 15:28

so now how can i make it pretier ?
– mecabpazzo95
Nov 22 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 at 15:34

for me it is not working correctly again maybe th cause the css !?
– mecabpazzo95
Nov 22 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.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

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');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Qfyilyi