Discussion :

[harry226h]

Bonjour
Je viens demander votre aide afin de trouver la solution à mon problème.

J'ai un tableau bootgrid sur lequel j'essai d'appliquer une largeur de colonne fixe à chaque colonne sans succès. Malgré mes recherches, le résultat reste le même (Largeur identique pour toutes les colonnes).

J'utilise dreamweaver, lorsque je suis en mode création les largeurs des colonnes sont comme je souhaite mais dans le navigateur rien ne change.

Besoin de votre aide.

Le code du tableau

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="col-sm-8">
		<div class="well clearfix">
			<div class="pull-right"><button type="button" class="btn btn-xs btn-primary" id="command-add" data-row-id="0">
			<span class="glyphicon glyphicon-plus"></span> Record</button></div></div>
		<table id="employee_grid" class="table table-condensed table-hover table-striped" width="60%" cellspacing="0" data-toggle="bootgrid">
			<thead>
				<tr>
					<th data-column-id="id" data-type="numeric" data-identifier="true">Empid</th>
					<th data-column-id="employee_name">Name</th>
					<th data-column-id="employee_salary">Salary</th>
					<th data-column-id="employee_age">Age</th>
					<th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
				</tr>
			</thead>
		</table>
    </div>

[Celira]

Bootgrid, c'est un plugin JS pour Bootstrap non ? Donc c'est du côté de la configuration du plugin qu'il faut regarder.

[NoSmoking]

Bonjour,

J'ai un tableau bootgrid sur lequel j'essai d'appliquer une largeur de colonne fixe à chaque colonne sans succès.

ton soucis semble plutôt venir de l'application du CSS.

Il serait bon que tu nous indiques ce que tu as essayé !

PS : je déplace vers le Forum CSS

[harry226h]

Bonjour NoSmocking, merci pour l'interet.

ci dessous le code css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
.bootgrid-header,
.bootgrid-footer {
  margin: 15px 0;
}
.bootgrid-header a,
.bootgrid-footer a {
  outline: 0;
}
.bootgrid-header .search,
.bootgrid-footer .search {
  display: inline-block;
  margin: 0 20px 0 0;
  vertical-align: middle;
  width: 180px;
}
.bootgrid-header .search .glyphicon,
.bootgrid-footer .search .glyphicon {
  top: 0;
}
.bootgrid-header .search.search-field::-ms-clear,
.bootgrid-footer .search.search-field::-ms-clear,
.bootgrid-header .search .search-field::-ms-clear,
.bootgrid-footer .search .search-field::-ms-clear {
  display: none;
}
.bootgrid-header .pagination,
.bootgrid-footer .pagination {
  margin: 0 !important;
}
.bootgrid-header .actionBar,
.bootgrid-footer .infoBar {
  text-align: right;
}
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu,
.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu {
  text-align: left;
}
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item,
.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item {
  cursor: pointer;
  display: block;
  margin: 0;
  padding: 3px 20px;
  white-space: nowrap;
}
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item:hover,
.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item:hover,
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item:focus,
.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item:focus {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item.dropdown-item-checkbox,
.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item.dropdown-item-checkbox,
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item .dropdown-item-checkbox,
.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item .dropdown-item-checkbox {
  margin: 0 2px 4px 0;
  vertical-align: middle;
}
.bootgrid-header .actionBar .btn-group > .btn-group .dropdown-menu .dropdown-item.disabled,
.bootgrid-footer .infoBar .btn-group > .btn-group .dropdown-menu .dropdown-item.disabled {
  cursor: not-allowed;
}
.bootgrid-table {
  table-layout: fixed;
}
.bootgrid-table a {
  outline: 0;
}
.bootgrid-table th > .column-header-anchor {
  color: #333;
  cursor: not-allowed;
  display: block;
  position: relative;
  text-decoration: none;
}
.bootgrid-table th > .column-header-anchor.sortable {
  cursor: pointer;
}
.bootgrid-table th > .column-header-anchor > .text {
  display: block;
  margin: 0 16px 0 0;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bootgrid-table th > .column-header-anchor > .icon {
  display: block;
  position: absolute;
  right: 0;
  top: 2px;
}
.bootgrid-table th:hover,
.bootgrid-table th:active {
  background: #fafafa;
}
.bootgrid-table td {
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bootgrid-table td.loading,
.bootgrid-table td.no-results {
  background: #fff;
  text-align: center;
}
.bootgrid-table th.select-cell,
.bootgrid-table td.select-cell {
  text-align: center;
  width: 30px;
}
.bootgrid-table th.select-cell .select-box,
.bootgrid-table td.select-cell .select-box {
  margin: 0;
  outline: 0;
}
.table-responsive .bootgrid-table {
  table-layout: inherit !important;
}
.table-responsive .bootgrid-table th > .column-header-anchor > .text {
  overflow: inherit !important;
  -ms-text-overflow: inherit !important;
  -o-text-overflow: inherit !important;
  text-overflow: inherit !important;
  white-space: inherit !important;
}
.table-responsive .bootgrid-table td {
  overflow: inherit !important;
  -ms-text-overflow: inherit !important;
  -o-text-overflow: inherit !important;
  text-overflow: inherit !important;
  white-space: inherit !important;
}

[Invité]

Bonjour,

• Les tableaux (XHTML & CSS) - II.7. col et colgroup

[NoSmoking]

Dans ce que tu montre je ne vois pas bien où tu dimensionnes tes colonnes hormis avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.bootgrid-table th.select-cell,
.bootgrid-table td.select-cell {
  text-align: center;
  width: 30px;
}

mais dont le sélecteur ne correspond pas au code HTML que tu as fourni

Il y a un ciblage dans le fichier https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/flatly/bootstrap.min.css visiblement utilisé par le plugin

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
.table>caption+thead>tr:first-child>th,
.table>colgroup+thead>tr:first-child>th,
.table>thead:first-child>tr:first-child>th,
.table>caption+thead>tr:first-child>td,
.table>colgroup+thead>tr:first-child>td,
.table>thead:first-child>tr:first-child>td {
  border-top: 0;
}

avec un poids de sélecteur de l'ordre de 0-3-3.

Si tu souhaites utiliser le même principe, même s'il y a plus simple pas vrai Jérôme , tu pourrais faire quelque chose comme

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.table > thead:first-child > tr:first-child > th:first-child {
  width: 20%;
  background: #ABC;   /* juste pour visualiser */
}
.table > thead:first-child > tr:first-child > th:nth-child(2) {
  width: 30%;
  background: #CAB;
}
.table > thead:first-child > tr:first-child > th:nth-child(3) {
  width: 20%;
  background: #BCA;
}
.table > thead:first-child > tr:first-child > th:nth-child(4) {
  width: 10%;
  background: #BCD;
}
.table > thead:first-child > tr:first-child > th:nth-child(5) {
  width: 20%;
  background: #DBC;
}

Comme je suis heureux de ne pas utiliser BT