td anchos, no funciona?

Entonces tengo este código aquí:

<table>
    <tr>
        <td width="200px" valign="top">
            <div class="left_menu">
                <div class="menu_item">
                    <a href="#">Home</a>
                </div>
            </div>
        </td>
        <td width="1000px" valign="top">Content</td>
    </tr>
</table>

con el CSS

.left_menu {
    background: none repeat scroll 0 0 #333333;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
}

.menu_item {
    background: none repeat scroll 0 0 #CCCCCC;
    border-bottom: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
    border-top: 1px solid #FFFFCC;
    cursor: pointer;
    padding: 5px;
}

Funciona bien en mi navegador y lo he probado en todos los navegadores, tanto en Mac como en PC, pero alguien se queja de que tdel widthde 200 sigue cambiando de ancho. No tengo ni idea de qué está hablando. ¿Alguien sabe por qué ve el cambio de ancho en el td?

Debería ser:

<td width="200">

o

<td style="width: 200px">

Tenga en cuenta que si su celda contiene algún contenido que no encaja en los 200px (como somelongwordwithoutanyspaces), la celda se estirará de todos modos, a menos que su CSS contenga table-layout: fixedpara la tabla.

EDITAR

Como señaló kristina childs en su respuesta, debe evitar tanto el widthatributo como el uso de CSS en línea (con el styleatributo). Es una buena práctica separar el estilo y la estructura tanto como sea posible.

El ancho y / o alto en las tablas ya no son estándar; como dice Ianzz, están en desuso. En cambio, la mejor manera de hacer esto es tener un elemento de bloque dentro de la celda de la tabla que mantendrá la celda abierta al tamaño deseado:

<table>
    <tr>
        <td valign="top">
            <div class="left_menu">
                <div class="menu_item">
                    <a href="#">Home</a>
                </div>
            </div>
        </td>
        <td valign="top" class="content">Content</td>
    </tr>
</table>

CSS

.content {
    width: 1000px;
}

.left_menu {
    background: none repeat scroll 0 0 #333333;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    width: 200px;
}

.menu_item {
    background: none repeat scroll 0 0 #CCCCCC;
    border-bottom: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
    border-top: 1px solid #FFFFCC;
    cursor: pointer;
    padding: 5px;
}

 <table style="table-layout:fixed;">

Esto forzará el ancho de estilo <td>. Si el texto lo llena en exceso, se superpondrá al otro <td>texto. Intente utilizar consultas de medios.

No puede especificar unidades en width/ heightatributos de una tabla; siempre están en píxeles, pero no debe utilizarlos en absoluto, ya que están obsoletos.

Puede probar el "table-layout: fixed;" a tu mesa

table-layout: fixed;
width: 150px;

150px o el ancho deseado.

Referencia: https://css-tricks.com/fixing-tables-long-strings/

Puede usar dentro de la <td>etiqueta css:display:inline-block

Me gusta: <td style="display:inline-block">

tratar de usar

word-wrap: break-word;

espero que esto ayude

prueba esto:

word-break: break-all;

yo suelo

<td nowrap="nowrap">

para evitar que se envuelva Referencia: https://www.w3schools.com/tags/att_td_nowrap.asp

Tenga en cuenta que ajustar el ancho de una columna en el panel afectará a toda la tabla.

<table>
    <thead>
        <tr width="25">
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tr>
        <td>Joe</td>
        <td>[email protected]</td>
    </tr>
</table>

En mi caso, el ancho en thead> tr anulaba el ancho en table> tr> td directamente.

Utilizar

<table style="table-layout:fixed;">

Forzará que la tabla se establezca al 100% de ancho. Luego use este código

$('#dataTable').dataTable( {
        bAutoWidth: false, 
        aoColumns : [
          { sWidth: '45%' },
          { sWidth: '45%' },
          { sWidth: '10%' },
              ]
      });

(la identificación de la tabla es dataTable y tiene 3 columnas) para especificar la longitud de cada celda

Intenté con muchas soluciones pero no funcionó para mí, así que probé flexionar con la tabla y funcionó bien para mí con todas las funcionalidades de la tabla como border-collapse y así sucesivamente solo el cambio es la propiedad de visualización

Este era mi requisito de HTML

<table>
  <thead>
    <tr>
      <th>1</th>
      <th colspan="3">2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td colspan="3">2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td colspan="2">3</td>
    </tr>
  </tbody>
</table>

Mi CSS

table{
    display: flex;
  flex-direction: column;
}
table tr{
    display: flex;
  width: 100%;
}
table > thead > tr > th:first-child{
    width: 20%;
}
table > thead > tr > th:last-child{
    width: 80%;
}
table > tbody tr > td:first-child{
    width: 10%;
}
table > tbody tr > td{
    width: 30%;
}
table > tbody tr > td[colspan="2"]{
    width: 60%;
}
table > tbody tr > td[colspan="3"]{
    width: 90%;
}
/*This is to remove border making 1px space on right*/
table > tbody tr > td:last-child{
    border-right: 0;
}

Este problema se resuelve fácilmente usando min-widthy max-widthdentro de una regla CSS.

HTML

<table>
  <tr>
    <td class="name">Peter</td>
    <td class="hobby">Photography</td>
    <td class="comment">A long comment about something...</td>
  </td>
</table>

CSS

.name {
  max-width: 80px;
  min-width: 80px;
}

Esto obligará a la primera columna a tener 80 píxeles de ancho. Por lo general, solo uso el ancho máximo sin el ancho mínimo para reinar en el texto que, en ocasiones, es demasiado largo para crear una tabla que tiene una columna súper ancha que está casi vacía. Sin embargo, la pregunta del OP era establecer un ancho fijo, por lo tanto, ambas reglas juntas. En muchos navegadoreswidth:80px; CSS se ignora para las columnas de la tabla. Establecer el ancho dentro del HTML funciona, pero no es la forma en que debería hacer las cosas.

Recomendaría usar reglas de ancho mínimo y máximo, y no establecerlas de la misma manera, sino establecer un rango. De esta manera, la tabla puede hacer su trabajo, pero puedes darle algunas pistas sobre qué hacer con contenido demasiado extenso.

Si quiero evitar que el texto se ajuste y aumente la altura de una fila, pero aún así hacer posible que un usuario vea el texto completo, utilizo white-space: nowrap; en la regla principal, luego aplico una regla de desplazamiento que elimina las reglas de ancho y ahora. para que el usuario pueda ver el contenido completo cuando pasa el mouse sobre él. Algo como esto:

CSS

.name {
  max-width: 80px;
  white-space: nowrap;
  overflow: hidden;
}
.name:hover {
  max-width: none;
  white-space: normal;
  overflow:auto;
}

Depende exactamente de lo que esté tratando de lograr. Espero que esto ayude a alguien. PD: para iOS hay una solución para que el desplazamiento no funcione: consulte CSS Hover no funciona en iOS Safari y Chrome