Как я могу заставить отдельные элементы в элементе "td" html-таблицы отображать inline (слева направо)?

Question

Я обновляю старое приложение ASP.NET Web Forms, которое моя группа ранее поддерживала только в IE, чтобы оно было совместимо с современными браузерами (Chrome, Firefox и т. Д.). Помимо прочих проблем, у меня небольшая проблема с тем, как значки (которые также являются ссылками) отображаются внутри одного элемента 'td' определенной таблицы, сгенерированной при загрузке приложения. Значки - это ссылки на различные параметры, относящиеся к каждой записи / строке таблицы.

В IE значки расположены в ряд слева направо. Но в других браузерах значки располагаются вертикально. Мне сказали привести стиль в соответствие с тем, как он выглядит в IE.

Я думал, что это будет простой вопрос изменения некоторого CSS, но до сих пор я не смог заставить это работать. Значки, о которых я говорю, являются потомками элементов и являются либо элементами, либо элементами (у которых затем есть собственные дочерние элементы img), поэтому я попытался

td img {
display: inline-block;
}

td a {
display: inline-block;
}

, но это никак не повлияло.

HTML (после его создания) имеет структуру, подобную

(within table, body, row...)

<td>
 <img src="icon1.gif">
 <a href=JavaScript:editThisEntry(entryNumber)>
    <img src="icon2.gif">
 </a>
 <a href=JavaScript:doADifferentEdit(entryNumber)>
    <img src="icon3.gif">
 </a>
</td>

Итак, ожидаемый результат: три значка в элементе выстроены в ряд (и td достаточно широк, чтобы вместить).

Фактически: три значка со знаком расположены друг над другом, делая каждый ряд «толстым» сверху вниз и отбрасывая внешний вид таблицы.

Ядовольно плохо знаком с этим материалом, так что я чувствую, что упускаю что-то простое, но я не нашел описание своей проблемы через Google. Любая помощь приветствуется, спасибо!

Answer 1

Спасибо всем. Хорошие предложения. В конце концов, ответ pcalkins сработал для меня, но мне пришлось немного подправить его, чтобы добавить в мою таблицу стилей CSS. Я закончил тем, что использовал это:

td {
  white-space: nowrap;
}

Answer 2

тд {дисплей: гибкий;}

Возможно, будет лучшим решением, поскольку оно будет применяться в современных браузерах, но не поддерживается в IE до IE 11.

Answer 3

Попробуйте добавить

table {
    table-layout: fixed;
}

td a, td img {
    display:inline-block;
    vertical-align:middle;
}