Как отформатировать HTML-таблицу со встроенными стилями, чтобы она выглядела как визуализированная таблица Excel? - PullRequest
Новая
       15

Как отформатировать HTML-таблицу со встроенными стилями, чтобы она выглядела как визуализированная таблица Excel?

16 голосов
/ 08 сентября 2010

В настоящее время я застрял в настройке границ в HTML-таблице.(Я использую встроенные стили для лучшего рендеринга в почтовых клиентах). У меня есть этот кусок кода: 

<html>
    <body>
        <table style="border: 1px solid black;">
            <tr>
                <td width="350" style="border: 1px solid black ;">
                    Foo
                </td>
                <td width="80" style="border: 1px solid black ;">
                    Foo1
                </td>
                <td width="65" style="border: 1px solid black ;">
                    Foo2
                </td>
            </tr>
            <tr style="border: 1px solid black;">
                <td style="border: 1px solid black;">
                    Bar1
                </td>
                <td style="border: 1px solid black;">
                    Bar2
                </td>
                <td style="border: 1px solid black;">
                    Bar3
                </td>
            </tr>
            <tr style="border: 1px solid black;">
                <td style="border: 1px solid black;">
                    Bar1
                </td>
                <td style="border: 1px solid black;">
                    Bar2
                </td>
                <td style="border: 1px solid black;">
                    Bar3
                </td>
            </tr>
        </table>
    </body>
</html>

Он выглядит так: alt text

Я хочуТаблица, которая будет отображаться так же, как Excel будет отображать таблицу с внутренней и внешней границей: alt text

Ответы [ 3 ]

29 голосов
/ 08 сентября 2010 
table {
  border-collapse:collapse;
}
9 голосов
/ 08 сентября 2010

Добавьте cellpadding и cellspacing, чтобы решить эту проблему.Редактировать: Также удалена двойная граница пикселей. 

<style>
td
{border-left:1px solid black;
border-top:1px solid black;}
table
{border-right:1px solid black;
border-bottom:1px solid black;}
</style>
<html>
    <body>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td width="350" >
                    Foo
                </td>
                <td width="80" >
                    Foo1
                </td>
                <td width="65" >
                    Foo2
                </td>
            </tr>
            <tr>
                <td>
                    Bar1
                </td>
                <td>
                    Bar2
                </td>
                <td>
                    Bar3
                </td>
            </tr>
            <tr >
                <td>
                    Bar1
                </td>
                <td>
                    Bar2
                </td>
                <td>
                    Bar3
                </td>
            </tr>
        </table>
    </body>
</html>
4 голосов
/ 24 апреля 2018

Это быстрый и грязный (и не формально действительный HTML5), но, кажется, работает - и это inline в соответствии с вопросом: 

<table border='1' style='border-collapse:collapse'>

Неттребуется дальнейшее оформление тегов <tr> / <td> (для базовой таблицы).

...