5

Como definir a largura da coluna de duas tabelas para que uma não tenha uma célula maior que a outra? Quando tento criar, a célula da segunda tabela sempre fica maior que a célula da primeira tabela, mesmo definindo <td style="width: 35px"> para cada uma, a segunda tabela permanece maior.

Como eu poderia deixar o tamanho das duas tabelas fixas?

Exemplo executável abaixo, e também no 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: A tabela é gerada dinamicamente via PHP, o único problema está no tamanho.

1
  • Outras opções de respostas são bem vindas, mesmo com uma resposta já aceita, pode-se haver diferentes maneiras para diferentes necessidades. =)
    – Florida
    Commented 12/07/2016 às 2:56

2 Respostas 2

8

O problema para impôr width: 35px; é que a table precisa de ser limitada na sua largura, senão vai ter a ultima td a adaptar-se ao resto da largura.

Sugestão (e tendo em conta que 35 x 4 = 140):

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

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

Pode também usar percentagens para ter as td todas do mesmo tamanho. Pode colocar no CSS assim: http://jsfiddle.net/f77kq/1/

td {
    width: 25%;
}

No seu caso está a usar uma biblioteca de CSS. Com bibliotecas fica por vezes mais díficil alterar o CSS e pode ser necessário "forçar" o CSS para o que quer, usando width: 25% !important;. Isto deve ser evitado, mas se fôr absolutamente necessário pode usar assim: http://jsfiddle.net/f77kq/2/

3

Outra maneira mais agradável, usando <col>, e css para gerenciar as celulas da tabela setando table-layout:fixed na table.

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

Código CSS:

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

Tabela:

<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

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .