max-width: 100% не работает

Question

У меня есть таблица сетки на моей странице, которая расширяется за пределы ширины страницы, хотя у меня максимальная ширина: 100% установлена ​​в нескольких местах. Вот мой заказ CSS для таблицы (это в .gridTable класса):

gridTable{ 
    border-top: 1px solid #dddddd; 
    border-collapse: collapse; 
    border-spacing: 0; 
    float:left; 
    table-layout: fixed; 
    max-width: 100% !important;      
} 

Существует один столбец, который имеет очень длинные данные, и выводит таблицу, чтобы стать слишком широкими. Я попытался ограничить что скрывающим перелив:

div.gridTable tbody > tr > td:nth-last-child(2) { 
    max-width:100%; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 

Однако даже при всем этом, моем столе еще проходит мимо ширины страницы, когда у меня есть длинные данные в этом столбце. Когда я проверяю элемент, я вижу, что он имеет все ограничения на максимальную ширину: 100% и даже некоторые унаследованы от файла bootstrap.css для класса таблицы, но по какой-то причине они ничего не делают; он просто расширяется настолько, насколько это необходимо, и добавляет полосу прокрутки.

Все работает, если я устанавливаю ширину для одного столбца проблемы на фиксированное количество пикселей, но, очевидно, я не хочу этого делать, потому что он должен быть другого размера в зависимости от размера экрана.

EDIT: Это не тот же вопрос, что и this question, потому что решение этого вопроса состояло в том, чтобы добавить слово-break: break-word, чтобы сломать строки в нужном размере. Тем не менее, это заставляет их переносить на другую строку, и я не хочу никакой упаковки, я хочу скрыть переполнение. Когда я включаю код, чтобы скрыть переполнение, как я сейчас делаю, слово-break: слово-слово-код ничего не меняет.

EDIT 2: я определяю мою таблицу из DataTable дт, и связывание данных в коде позади:

GridView1.DataSource = dt; 
GridView1.DataBind(); 

Вот HTML:

<div class="gridTable"> 
    <asp:GridView runat="server" ID="GridView1" > 
</asp:GridView></div> 

Answer 1

Вот трюк, который я тестировал в Chrome, Firefox, Edge, IE11, с успехом.

Удаление table-layout: fixed, а затем установка ширины 1px, делает первый столбец размером с его содержимым.

Добавление div во второй столбец, давая ему ширину 1px, сделает его переполнение видимым ударом, и это, кажется, не толкает столбец за пределы таблицы.

Fiddle demo

.gridTable { 
 
    border-collapse: collapse; 
 
    width: 80%; 
 
} 
 
.gridTable td { 
 
    border: red solid 1px; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
} 
 
.gridTable td:first-child { 
 
    width: 1px; 
 
} 
 
.gridTable div { 
 
    max-width: 1px; 
 
}

<table class="gridTable"> 
 
    <tr> 
 
    <td>Col 1</td> 
 
    <td>Col 2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Col 1</td> 
 
    <td><div> 
 
     Col 2a Col 2a Col 2a Col 2a Col 2a 
 
     Col 2b Col 2b Col 2b Col 2b Col 2b 
 
     Col 2c Col 2c Col 2c Col 2c Col 2c 
 
     </div> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

Я думаю, что это может поможет вам:

td { 
    word-break: break-word; 
} 

Это то, что я сделал, когда я был длинный URL внутри td и т он не разбивал себя и заставлял таблицу расширяться за пределы ширины страницы.

Вот ссылка на мой question.

Answer 3

Предлагаю вам добавить ширину для каждого td в первой строке. общая сумма их ширины должна составлять 100%. Если у вас 3 одинаковых столбца, то ширина 33.33% для каждого из них, если 4 = 25%, если они не равны, чем вычисляют для них нужный процент. ширина

demo

Plus назначить 100% за столом и переполнения: скрытый для с.в., чтобы скрыть большое содержание.

.gridTable{ width:100%} 
.gridTable td {overflow:hidden;}