Как правильно заменить этот HTML / табличный код на div или span?

Question

У меня есть этот html, который я использую, чтобы создать рамку для просмотра заголовка, это страница для просмотра блок-схем. Довольно прямолинейно и выглядит правильно.

    <td>
        <table align="center" border="0" style="border: thin solid black;" cellpadding="0">
            <tr>
                <td align="center" nowrap style="padding: 5px;" class="headerlarge">&nbsp;Resources:&nbsp;</td>
            </tr>
        </table>
    </td>

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

font-weight: 600;
font-size: 12pt;
color: black;
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-style: normal;  

когда я пытаюсь использовать div, граница заполняет весь родительский элемент, и я хочу, чтобы он был размером, который вписывался в текст, а не увеличивался до любого размера. Я поиграл с полями и отступами в родительском элементе TD, а также в div или span. Какой класс CSS мне нужен, чтобы создать прямоугольник с отступом, который точно помещается вокруг текста и не потеряет ни одной границы в ячейке таблицы?

ОБНОВЛЕНИЕ: Итак, я обнаружил, что эта проблема специфична только для IE6 и 7, другие браузеры работают с использованием CSS Phoenix, оболочки div для промежутка. Я разместил HTML / CSS Здесь, в Jsbin . Таким образом, остается вопрос, как обойти это в IE 6 и 7 без каких-либо взломов и чрезмерного выполнения CSS, иначе я мог бы также придерживаться глупой вложенной таблицы.

Answer 1

Редактировать: Я подтвердил, что Ответ Нино работает на Firefox 3.0.14 / Ubuntu 9.04 и IE 8 / WinXP SP3. Стиль тегов dt и tr, в которых содержится div, обновлять не нужно. Итак, комбинируя эти вещи, мы получаем:

.headerlarge {
  border: 1px solid black;
  display: inline-block;
  margin: 0px;
  padding: 5px;
  /* ... */
}

<div class="headerlarge">Resources:</div>

Answer 2

Попробуйте использовать display:inline-block для контейнера в IE.

Answer 3

<div class="divClass">
    <span class="headerlarge spanClass">
         Resources: 
    </span>
</div>
<style>
.headerlarge
{
    font-weight: 600;
    font-size: 12pt;
    color: black;
    font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-style: normal;    
}
.divClass
{
    text-align: center; 
    padding: 0;
}
.spanClass
{
    white-space: nowrap; 
    padding: 5px; 
    border: 1px solid black;
}
</style>