Таблица закругленных углов HTML сокращается при увеличении данных - PullRequest
Новая
       27

Таблица закругленных углов HTML сокращается при увеличении данных

0 голосов
/ 18 ноября 2011

У меня есть таблица HTML с каждым td, имеющим изображение с закругленными углами, я соединяю изображения и получаю таблицу с закругленными углами.Вот как это выглядит,

Rounded corners

Вот HTML-код ниже вместе с CSS 

<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" frame="void"
    style="width: 100%;">
    <tr>
        <td width="1%">
            <img alt="" src="Images/frame_top_left.jpg" />
        </td>
        <td class="top_frame">
        </td>
        <td width="1%" align="right">
            <img alt="" src="Images/frame_top_right.jpg" />
        </td>
    </tr>
    <tr>
        <td>
            <img alt="" src="Images/frame_bottom_left.jpg" />
        </td>
        <td class="bottom_frame">
        </td>
        <td align="right">
            <img alt="" src="Images/frame_bottom_right.jpg" />
        </td>
    </tr>
</table>

И вот здесь CSS

CSS

Теперь данные динамически помещаются в тд с классом css "bottom_frame" всякий раз, когда размещаются данные, вся таблица изменяется, вот как она выглядит при размещении данных

On data expand

вот изображение вставленных данных в формате HTML.

HTML Data inserted

Как мне сохранить свою таблицу с любыми потерями в ней ????

Спасибо и С уважением, Фрэнсис П.

1 Ответ

0 голосов
/ 18 ноября 2011

Вам лучше добавить еще одну строку в таблицу, чтобы поместить в нее содержимое. Примерно так: 

<table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" frame="void"
style="width: 100%;">
<tr>
    <td width="1%">
        <img alt="" src="Images/frame_top_left.jpg" />
    </td>
    <td class="top_frame">
    </td>
    <td width="1%" align="right">
        <img alt="" src="Images/frame_top_right.jpg" />
    </td>
</tr>
<tr>
    <td colspan="3" class="middle_frame">
        -- Put your content right here --
    </td>
</tr>    
<tr>
    <td>
        <img alt="" src="Images/frame_bottom_left.jpg" />
    </td>
    <td class="bottom_frame">
    </td>
    <td align="right">
        <img alt="" src="Images/frame_bottom_right.jpg" />
    </td>
</tr>
</table>
...