Fixed-size table cell

Question

Fixed-size table cell

Navigation

#1 by (7 votes)
#2 by (3 votes)

5

How can I set the width of the column of two tables so that one does not have one cell larger than the other? When I try to create, the cell of the second table always gets larger than the cell of the first table, even setting <td style="width: 35px"> to each, p>

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

Example executable below, and also in link

/*! 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><divid="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.

html css twitter-bootstrap tabela

asked by anonymous 09.06.2014 / 07:52

2 answers

3

Another nice way, using <col> , and css to manage the cells of the table by setting table-layout:fixed to table .

link

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>

Reference SOen: Fixed Table Cell Width

09.06.2014 / 17:17

How to set printing options via javascript? How to do a "rbind" in tables from a SQL base from R?

score 7 · Accepted Answer

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

Suggestion (and taking into account that 35 x 4 = 140):

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

link

You can also use percentages to have all% of all the same size. You can put it in CSS like this: link

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 whatever, using td . This should be avoided, but if absolutely necessary you can use it like this: link