Table cell with fixed size

Question

Table cell with fixed size

Asked 10 years, 5 months ago

Viewed 30,811 times

5

How to set the width of spine of two tables so that one does not have a cell bigger than the other? When I try to create, the cell of the second table always gets bigger than the cell of the first table, even defining <td style="width: 35px"> for each one, the second table remains larger.

How could I leave the size of the two fixed tables?

Executable example below, and also in http://jsfiddle.net/f77kq/

/*! X-editable - v1.5.1 
 * In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
 * http://github.com/vitalets/x-editable
 * Copyright (c) 2013 Vitaliy Potapov; Licensed MIT */
.editableform {
  margin - bottom: 0; /* overwrites bootstrap margin */
}

.editableform.control - group {
  margin - bottom: 0; /* overwrites bootstrap margin */
  white - space: nowrap; /* prevent wrapping buttons on new line */
  line - height: 20px; /* overwriting bootstrap line-height. See #133 */
}

/* 
  BS3 width:1005 for inputs breaks editable form in popup 
  See: https://github.com/vitalets/x-editable/issues/393
*/
.editableform.form - control {
  width: auto;
}

.editable - buttons {
  display: inline - block; /* should be inline to take effect of parent's white-space: nowrap */
  vertical - align: top;
  margin - left: 7px;
  /* inline-block emulation for IE7*/
  zoom: 1; * display: inline;
}

.editable - buttons.editable - buttons - bottom {
  display: block;
  margin - top: 7px;
  margin - left: 0;
}

.editable - input {
  vertical - align: top;
  display: inline - block; /* should be inline to take effect of parent's white-space: nowrap */
  width: auto; /* bootstrap-responsive has width: 100% that breakes layout */
  white - space: normal; /* reset white-space decalred in parent*/
  /* display-inline emulation for IE7*/
  zoom: 1; * display: inline;
}

.editable - buttons.editable - cancel {
  margin - left: 7px;
}

/*for jquery-ui buttons need set height to look more pretty*/
.editable - buttons button.ui - button - icon - only {
  height: 24px;
  width: 30px;
}

.editableform - loading {
  background: url('../img/loading.gif') center center no - repeat;
  height: 25px;
  width: auto;
  min - width: 25px;
}

.editable - inline.editableform - loading {
  background - position: left 5px;
}

.editable - error - block {
  max - width: 300px;
  margin: 5px 0 0 0;
  width: auto;
  white - space: normal;
}

/*add padding for jquery ui*/
.editable - error - block.ui - state - error {
  padding: 3px;
}

.editable - error {
  color: red;
}

/* ---- For specific types ---- */

.editableform.editable - date {
  padding: 0;
  margin: 0;
  float: left;
}

/* move datepicker icon to center of add-on button. See https://github.com/vitalets/x-editable/issues/183 */
.editable - inline.add - on.icon - th {
  margin - top: 3px;
  margin - left: 1px;
}


/* checklist vertical alignment */
.editable - checklist label input[type = "checkbox"],
  .editable - checklist label span {
    vertical - align: middle;
    margin: 0;
  }

.editable - checklist label {
  white - space: nowrap;
}

/* set exact width of textarea to fit buttons toolbar */
.editable - wysihtml5 {
  width: 566px;
  height: 250px;
}

/* clear button shown as link in date inputs */
.editable - clear {
  clear: both;
  font - size: 0.9em;
  text - decoration: none;
  text - align: right;
}

/* IOS-style clear button for text inputs */
.editable - clear - x {
  background: url('../img/clear.png') center center no - repeat;
  display: block;
  width: 13px;
  height: 13px;
  position: absolute;
  opacity: 0.6;
  z - index: 100;

  top: 50 % ;
  right: 6px;
  margin - top: -6px;

}

.editable - clear - x: hover {
  opacity: 1;
}

.editable - pre - wrapped {
    white - space: pre - wrap;
  }
  .editable - container.editable - popup {
    max - width: none!important; /* without this rule poshytip/tooltip does not stretch */
  }

.editable - container.popover {
  width: auto; /* without this rule popover does not stretch */
}

.editable - container.editable - inline {
  display: inline - block;
  vertical - align: middle;
  width: auto;
  /* inline-block emulation for IE7*/
  zoom: 1; * display: inline;
}

.editable - container.ui - widget {
    font - size: inherit; /* jqueryui widget font 1.1em too big, overwrite it */
    z - index: 9990; /* should be less than select2 dropdown z-index to close dropdown first when click */
  }
  .editable - click,
  a.editable - click,
  a.editable - click: hover {
    text - decoration: none;
    border - bottom: dashed 1px #0088cc;
}

.editable-click.editable-disabled, 
a.editable-click.editable-disabled, 
a.editable-click.editable-disabled:hover {
   color: # 585858;
    cursor: default;
    border - bottom: none;
  }

.editable - empty, .editable - empty: hover, .editable - empty: focus {
  font - style: italic;
  color: #DD1144;
  /* border-bottom: none; */
  text - decoration: none;
}

.editable - unsaved {
  font - weight: bold;
}

.editable - unsaved: after {
  /*    content: '*'*/
}

.editable - bg - transition {
  -webkit - transition: background - color 1400ms ease - out; - moz - transition: background - color 1400ms ease - out; - o - transition: background - color 1400ms ease - out; - ms - transition: background - color 1400ms ease - out;
  transition: background - color 1400ms ease - out;
}

/*see https://github.com/vitalets/x-editable/issues/139 */
.form - horizontal.editable {
  padding - top: 5px;
  display: inline - block;
}


/*!
 * Datepicker for Bootstrap
 *
 * Copyright 2012 Stefan Petre
 * Improvements by Andrew Rowls
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 */
.datepicker {
  padding: 4px; - webkit - border - radius: 4px; - moz - border - radius: 4px;
  border - radius: 4px;
  direction: ltr;
  /*.dow {
		border-top: 1px solid #ddd !important;
	}*/

}
.datepicker - inline {
    width: 220px;
  }
  .datepicker.datepicker - rtl {
    direction: rtl;
  }
  .datepicker.datepicker - rtl table tr td span {
    float: right;
  }
  .datepicker - dropdown {
    top: 0;
    left: 0;
  }
  .datepicker - dropdown: before {
    content: '';
    display: inline - block;
    border - left: 7px solid transparent;
    border - right: 7px solid transparent;
    border - bottom: 7px solid# ccc;
    border - bottom - color: rgba(0, 0, 0, 0.2);
    position: absolute;
    top: -7px;
    left: 6px;
  }
  .datepicker - dropdown: after {
    content: '';
    display: inline - block;
    border - left: 6px solid transparent;
    border - right: 6px solid transparent;
    border - bottom: 6px solid# ffffff;
    position: absolute;
    top: -6px;
    left: 7px;
  }
  .datepicker > div {
    display: none;
  }
  .datepicker.days div.datepicker - days {
    display: block;
  }
  .datepicker.months div.datepicker - months {
    display: block;
  }
  .datepicker.years div.datepicker - years {
    display: block;
  }
  .datepicker table {
    margin: 0;
  }
  .datepicker td,
  .datepicker th {
    text - align: center;
    width: 20px;
    height: 20px; - webkit - border - radius: 4px; - moz - border - radius: 4px;
    border - radius: 4px;
    border: none;
  }
  .table - striped.datepicker table tr td,
  .table - striped.datepicker table tr th {
    background - color: transparent;
  }
  .datepicker table tr td.day: hover {
    background: #eeeeee;
    cursor: pointer;
  }
  .datepicker table tr td.old,
  .datepicker table tr td.new {
    color: #999999;
}
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
  background: none;
  color: # 999999;
    cursor: default;
  }
  .datepicker table tr td.today,
  .datepicker table tr td.today: hover,
  .datepicker table tr td.today.disabled,
  .datepicker table tr td.today.disabled: hover {
    background - color: #fde19a;
    background - image: -moz - linear - gradient(top, #fdd49a, #fdf59a);
    background - image: -ms - linear - gradient(top, #fdd49a, #fdf59a);
    background - image: -webkit - gradient(linear, 0 0, 0 100 % , from(#fdd49a), to(#fdf59a));
    background - image: -webkit - linear - gradient(top, #fdd49a, #fdf59a);
    background - image: -o - linear - gradient(top, #fdd49a, #fdf59a);
    background - image: linear - gradient(top, #fdd49a, #fdf59a);
    background - repeat: repeat - x;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#fdd49a', endColorstr = '#fdf59a', GradientType = 0);
    border - color: #fdf59a# fdf59a# fbed50;
    border - color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid: DXImageTransform.Microsoft.gradient(enabled = false);
    color: #000;
}
.datepicker table tr td.today:hover,
.datepicker table tr td.today:hover:hover,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today.disabled:hover:hover,
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover:active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today.active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:hover.active,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today:hover.disabled,
.datepicker table tr td.today.disabled.disabled,
.datepicker table tr td.today.disabled:hover.disabled,
.datepicker table tr td.today[disabled],
.datepicker table tr td.today:hover[disabled],
.datepicker table tr td.today.disabled[disabled],
.datepicker table tr td.today.disabled:hover[disabled] {
  background-color: # fdf59a;
  }
  .datepicker table tr td.today: active,
  .datepicker table tr td.today: hover: active,
  .datepicker table tr td.today.disabled: active,
  .datepicker table tr td.today.disabled: hover: active,
  .datepicker table tr td.today.active,
  .datepicker table tr td.today: hover.active,
  .datepicker table tr td.today.disabled.active,
  .datepicker table tr td.today.disabled: hover.active {
    background - color: #fbf069\ 9;
  }
  .datepicker table tr td.today: hover: hover {
    color: #000;
}
.datepicker table tr td.today.active:hover {
  color: # fff;
  }
  .datepicker table tr td.range,
  .datepicker table tr td.range: hover,
  .datepicker table tr td.range.disabled,
  .datepicker table tr td.range.disabled: hover {
    background: #eeeeee; - webkit - border - radius: 0; - moz - border - radius: 0;
    border - radius: 0;
  }
  .datepicker table tr td.range.today,
  .datepicker table tr td.range.today: hover,
  .datepicker table tr td.range.today.disabled,
  .datepicker table tr td.range.today.disabled: hover {
    background - color: #f3d17a;
    background - image: -moz - linear - gradient(top, #f3c17a, #f3e97a);
    background - image: -ms - linear - gradient(top, #f3c17a, #f3e97a);
    background - image: -webkit - gradient(linear, 0 0, 0 100 % , from(#f3c17a), to(#f3e97a));
    background - image: -webkit - linear - gradient(top, #f3c17a, #f3e97a);
    background - image: -o - linear - gradient(top, #f3c17a, #f3e97a);
    background - image: linear - gradient(top, #f3c17a, #f3e97a);
    background - repeat: repeat - x;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#f3c17a', endColorstr = '#f3e97a', GradientType = 0);
    border - color: #f3e97a# f3e97a# edde34;
    border - color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid: DXImageTransform.Microsoft.gradient(enabled = false); - webkit - border - radius: 0; - moz - border - radius: 0;
    border - radius: 0;
  }
  .datepicker table tr td.range.today: hover,
  .datepicker table tr td.range.today: hover: hover,
  .datepicker table tr td.range.today.disabled: hover,
  .datepicker table tr td.range.today.disabled: hover: hover,
  .datepicker table tr td.range.today: active,
  .datepicker table tr td.range.today: hover: active,
  .datepicker table tr td.range.today.disabled: active,
  .datepicker table tr td.range.today.disabled: hover: active,
  .datepicker table tr td.range.today.active,
  .datepicker table tr td.range.today: hover.active,
  .datepicker table tr td.range.today.disabled.active,
  .datepicker table tr td.range.today.disabled: hover.active,
  .datepicker table tr td.range.today.disabled,
  .datepicker table tr td.range.today: hover.disabled,
  .datepicker table tr td.range.today.disabled.disabled,
  .datepicker table tr td.range.today.disabled: hover.disabled,
  .datepicker table tr td.range.today[disabled],
  .datepicker table tr td.range.today: hover[disabled],
  .datepicker table tr td.range.today.disabled[disabled],
  .datepicker table tr td.range.today.disabled: hover[disabled] {
    background - color: #f3e97a;
  }
  .datepicker table tr td.range.today: active,
  .datepicker table tr td.range.today: hover: active,
  .datepicker table tr td.range.today.disabled: active,
  .datepicker table tr td.range.today.disabled: hover: active,
  .datepicker table tr td.range.today.active,
  .datepicker table tr td.range.today: hover.active,
  .datepicker table tr td.range.today.disabled.active,
  .datepicker table tr td.range.today.disabled: hover.active {
    background - color: #efe24b\ 9;
  }
  .datepicker table tr td.selected,
  .datepicker table tr td.selected: hover,
  .datepicker table tr td.selected.disabled,
  .datepicker table tr td.selected.disabled: hover {
    background - color: #9e9e9e;
  background-image: -moz-linear-gradient(top, # b3b3b3, #808080);
  background-image: -ms-linear-gradient(top, # b3b3b3, #808080);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(# b3b3b3), to(#808080));
  background-image: -webkit-linear-gradient(top, # b3b3b3, #808080);
  background-image: -o-linear-gradient(top, # b3b3b3, #808080);
  background-image: linear-gradient(top, # b3b3b3, #808080);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= '#b3b3b3', endColorstr = '#808080', GradientType = 0);
border - color: #808080 # 808080 #595959;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled= false);
color: #fff;
text - shadow: 0 - 1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td.selected: hover,
  .datepicker table tr td.selected: hover: hover,
  .datepicker table tr td.selected.disabled: hover,
  .datepicker table tr td.selected.disabled: hover: hover,
  .datepicker table tr td.selected: active,
  .datepicker table tr td.selected: hover: active,
  .datepicker table tr td.selected.disabled: active,
  .datepicker table tr td.selected.disabled: hover: active,
  .datepicker table tr td.selected.active,
  .datepicker table tr td.selected: hover.active,
  .datepicker table tr td.selected.disabled.active,
  .datepicker table tr td.selected.disabled: hover.active,
  .datepicker table tr td.selected.disabled,
  .datepicker table tr td.selected: hover.disabled,
  .datepicker table tr td.selected.disabled.disabled,
  .datepicker table tr td.selected.disabled: hover.disabled,
  .datepicker table tr td.selected[disabled],
  .datepicker table tr td.selected: hover[disabled],
  .datepicker table tr td.selected.disabled[disabled],
  .datepicker table tr td.selected.disabled: hover[disabled] {
    background - color: #808080;
}
.datepicker table tr td.selected:active,
.datepicker table tr td.selected:hover:active,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected.active,
.datepicker table tr td.selected:hover.active,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected.disabled:hover.active {
  background-color: # 666666\ 9;
  }
  .datepicker table tr td.active,
  .datepicker table tr td.active: hover,
  .datepicker table tr td.active.disabled,
  .datepicker table tr td.active.disabled: hover {
    background - color: #006dcc;
  background-image: -moz-linear-gradient(top, # 0088cc, #0044cc);
  background-image: -ms-linear-gradient(top, # 0088cc, #0044cc);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(# 0088cc), to(#0044cc));
  background-image: -webkit-linear-gradient(top, # 0088cc, #0044cc);
  background-image: -o-linear-gradient(top, # 0088cc, #0044cc);
  background-image: linear-gradient(top, # 0088cc, #0044cc);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= '#0088cc', endColorstr = '#0044cc', GradientType = 0);
border - color: #0044cc # 0044cc #002a80;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled= false);
color: #fff;
text - shadow: 0 - 1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td.active: hover,
  .datepicker table tr td.active: hover: hover,
  .datepicker table tr td.active.disabled: hover,
  .datepicker table tr td.active.disabled: hover: hover,
  .datepicker table tr td.active: active,
  .datepicker table tr td.active: hover: active,
  .datepicker table tr td.active.disabled: active,
  .datepicker table tr td.active.disabled: hover: active,
  .datepicker table tr td.active.active,
  .datepicker table tr td.active: hover.active,
  .datepicker table tr td.active.disabled.active,
  .datepicker table tr td.active.disabled: hover.active,
  .datepicker table tr td.active.disabled,
  .datepicker table tr td.active: hover.disabled,
  .datepicker table tr td.active.disabled.disabled,
  .datepicker table tr td.active.disabled: hover.disabled,
  .datepicker table tr td.active[disabled],
  .datepicker table tr td.active: hover[disabled],
  .datepicker table tr td.active.disabled[disabled],
  .datepicker table tr td.active.disabled: hover[disabled] {
    background - color: #0044cc;
}
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover:active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active.active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:hover.active {
  background-color: # 003399\ 9;
  }
  .datepicker table tr td span {
    display: block;
    width: 23 % ;
    height: 54px;
    line - height: 54px;
    float: left;
    margin: 1 % ;
    cursor: pointer; - webkit - border - radius: 4px; - moz - border - radius: 4px;
    border - radius: 4px;
  }
  .datepicker table tr td span: hover {
    background: #eeeeee;
  }
  .datepicker table tr td span.disabled,
  .datepicker table tr td span.disabled: hover {
    background: none;
    color: #999999;
  cursor: default;
}
.datepicker table tr td span.active,
.datepicker table tr td span.active:hover,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover {
  background-color: # 006dcc;
    background - image: -moz - linear - gradient(top, #0088cc, # 0044cc);
    background - image: -ms - linear - gradient(top, #0088cc, # 0044cc);
    background - image: -webkit - gradient(linear, 0 0, 0 100 % , from(#0088cc), to(# 0044cc));
    background - image: -webkit - linear - gradient(top, #0088cc, # 0044cc);
    background - image: -o - linear - gradient(top, #0088cc, # 0044cc);
    background - image: linear - gradient(top, #0088cc, # 0044cc);
    background - repeat: repeat - x;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr = '#0088cc', endColorstr = '#0044cc', GradientType = 0);
    border - color: #0044cc # 0044cc #002a80;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled= false);
color: #fff;
text - shadow: 0 - 1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td span.active: hover,
  .datepicker table tr td span.active: hover: hover,
  .datepicker table tr td span.active.disabled: hover,
  .datepicker table tr td span.active.disabled: hover: hover,
  .datepicker table tr td span.active: active,
  .datepicker table tr td span.active: hover: active,
  .datepicker table tr td span.active.disabled: active,
  .datepicker table tr td span.active.disabled: hover: active,
  .datepicker table tr td span.active.active,
  .datepicker table tr td span.active: hover.active,
  .datepicker table tr td span.active.disabled.active,
  .datepicker table tr td span.active.disabled: hover.active,
  .datepicker table tr td span.active.disabled,
  .datepicker table tr td span.active: hover.disabled,
  .datepicker table tr td span.active.disabled.disabled,
  .datepicker table tr td span.active.disabled: hover.disabled,
  .datepicker table tr td span.active[disabled],
  .datepicker table tr td span.active: hover[disabled],
  .datepicker table tr td span.active.disabled[disabled],
  .datepicker table tr td span.active.disabled: hover[disabled] {
    background - color: #0044cc;
}
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover:active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active.active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:hover.active {
  background-color: # 003399\ 9;
  }
  .datepicker table tr td span.old,
  .datepicker table tr td span.new {
    color: #999999;
}
.datepicker th.datepicker-switch {
  width: 145px;
}
.datepicker thead tr:first-child th,
.datepicker tfoot tr th {
  cursor: pointer;
}
.datepicker thead tr:first-child th:hover,
.datepicker tfoot tr th:hover {
  background: # eeeeee;
  }
  .datepicker.cw {
    font - size: 10px;
    width: 12px;
    padding: 0 2px 0 5px;
    vertical - align: middle;
  }
  .datepicker thead tr: first - child th.cw {
    cursor: default;
    background - color: transparent;
  }
  .input - append.date.add - on i,
  .input - prepend.date.add - on i {
    display: block;
    cursor: pointer;
    width: 16px;
    height: 16px;
  }
  .input - daterange input {
    text - align: center;
  }
  .input - daterange input: first - child {
    -webkit - border - radius: 3px 0 0 3px; - moz - border - radius: 3px 0 0 3px;
    border - radius: 3px 0 0 3px;
  }
  .input - daterange input: last - child {
    -webkit - border - radius: 0 3px 3px 0; - moz - border - radius: 0 3px 3px 0;
    border - radius: 0 3px 3px 0;
  }
  .input - daterange.add - on {
    display: inline - block;
    width: auto;
    min - width: 16px;
    height: 18px;
    padding: 4px 5px;
    font - weight: normal;
    line - height: 18px;
    text - align: center;
    text - shadow: 0 1px 0# ffffff;
    vertical - align: middle;
    background - color: #eeeeee;
    border: 1px solid# ccc;
    margin - left: -5px;
    margin - right: -5px;
  }

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css" rel="stylesheet" />
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div id="user">
  <div class="entry-boxeditable" id="boxedit-0">

    <pre>other_stream || false</pre>
    <table id="user" class="table table-bordered table-striped">
      <tbody>
        <tr></tr>
      </tbody>
      <tbody>
        <tr>
          <td>false</td>
          <td>plother2</td>
          <td>2014-06-03 09:55:32</td>
          <td>otherlocation/mystream</td>
        </tr>
        <tr>
          <td>false</td>
          <td>plother2</td>
          <td>2014-06-03 09:55:32</td>
          <td>http:/local/demo.mp4</td>
        </tr>
      </tbody>
    </table>
    <pre>stackoverflow || true</pre>
    <table id="user" class="table table-bordered table-striped">
      <tbody>
        <tr></tr>
      </tbody>
      <tbody>
        <tr>
          <td>true</td>
          <td>plname1</td>
          <td>2009-12-11 16:25:05</td>
          <td>C:\sample.mp4</td>
        </tr>
      </tbody>
    </table>

  </div>
</div>

Ps: The table is generated dynamically via PHP, the only problem is in size.

Other answer options are welcome, even with an already accepted answer, there may be different ways to different needs. =)

– Florida

2016/07/12 at 02:56

2 answers

8

The problem to impose width: 35px; is that the table need to be limited in its width, otherwise it will have the last td to be adapted to the rest of the width.

Suggestion (and bearing in mind that 35 x 4 = 140):

table {
    max-width: 140px;
}
td {
    width: 35px;
}

http://jsfiddle.net/f77kq/3/

You can also use percentages to have td all the same size. You can put it in CSS like this: http://jsfiddle.net/f77kq/1/

td {
    width: 25%;
}

In your case you are using a CSS library. With libraries it is sometimes harder to change the CSS and it may be necessary to "force" the CSS to what it wants, using width: 25% !important;. This should be avoided, but if absolutely necessary you can use it like this: http://jsfiddle.net/f77kq/2/

Browser other questions tagged html css twitter-bootstrap table

You are not signed in. Login or sign up in order to post.

by Florida • **2,598** points · Answer 1 · 2014-06-09T15:17:27+00:00

Another more pleasant way, using <col>, and css to manage cellulae table setando table-layout:fixed in table.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/col

CSS code:

table.fixo { table-layout:fixed; }
table.fixo td { overflow: hidden; }

Table:

<table class="fixo">
    <col width="60px" />
    <col width="40px" />
    <tr>
        <td>Meu texto</td>
        <td>Meu texto 2</td>
    </tr>
</table>

Referencia Soen: Fixed Table Cell Width