Блог

Главная - Вопросы по программированию - Нежелательное поле

Нежелательное поле

#html #css

#HTML #css — код #css

Вопрос:

Я получаю нежелательное поле / отступ / границу размером 2 пикселя, но ни за что на свете не могу понять, что это вызывает. Это происходит одинаково как в FF47, так и в O 36.0.2130.80

введите описание изображения здесь

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
   <style>
       HEAD,BODY,TABLE,TBODY,TR,TH,TD,DIV {
            padding:0;
            margin:0;
            border:0;
            }
       BODY    {
            background-color:#555577;
            color:#CCCCCC;
            font-family:"Verdana","Arial","Helvetica";
            font-size:9pt;
            text-decoration:none;
            border:0;
            padding:0;
            margin:auto ;
            }
    </style>
    </head>
    <body>
        <table width="400" style="background-color:white;margin:auto;padding:0;border:0">
            <tr>
                <td>
                    <table width=200 style="background-color:#780000;color:white;padding;0;border:0;">
                        <tr>
                            <td>FOO</td>
                        </tr>
                    </table>
                </td>
           </tr>
       </table>
    </body>
</html>

Комментарии:

1. Можете ли вы добавить изображение, которое дает желаемые результаты?

2. Oeff, таблица внутри таблицы …. это так 1999

3. @LinkinTED Я думаю, что в некоторых случаях это все еще имеет смысл. Например, электронные письма в формате HTML.

4. JSFiddle сделает это

5. @xzegga. Я не понимаю. Если вы имеете в виду изображение, которое показывает то, что я хочу, просто представьте текущее изображение без этих 2 дополнительных пикселей по краю.

Ответ №1:

Добавить 

 border-spacing: 0px;

В таблицу.

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
   <style>
       HEAD,BODY,TABLE,TBODY,TR,TH,TD,DIV {
            padding:0;
            margin:0;
            border:0;
            border-spacing: 0px;
            }

       BODY    {
            background-color:#555577;
            color:#CCCCCC;
            font-family:"Verdana","Arial","Helvetica";
            font-size:9pt;
            text-decoration:none;
            border:0;
            padding:0;
            margin:auto ;
            }
    </style>
    </head>
    <body>
        <table><tr><td height="50"></td></tr></table>
        <table width="400" style="background-color:white;margin:auto;padding:0;border:0">
            <tr>
                <td>
                    <table width=200 style="background-color:#780000;color:white;padding;0;border:0;">
                        <tr>
                            <td>FOO</td>
                        </tr>
                    </table>
                </td>
           </tr>
       </table>
    </body>
</html>

https://jsfiddle.net/

введите описание изображения здесь

Ответ №2:

Добавьте «border-collapse: collapse;» к вашему элементу таблицы, вы можете увидеть рисунок здесь:

введите описание изображения здесь

Комментарии:

1. Я ценю твое решение, Джек, но уже выбрал Almo. Честно говоря, поскольку границ нет, я не совсем понимаю, как может работать свертывание границ ИЛИ разделение границ . Где-то что-то сломано.

Ответ №3:

Вы можете архивировать свою цель более чисто и профессионально, используя divs вместо таблиц:

 BODY {
    background-color:#555577;
}
#progress-containes {
    margin-top: 50px; 
    width : 400px;
    height: 30px;
    background-color: #fff;
}
#progress-bar {
    background-color:#780000;
    font: 400 9pt/1 "Verdana","Arial","Helvetica";
    width: 50%;
    color: #fff;
    padding-top: 8px;
    padding-left: 6px;
    box-sizing: border-box;
    height: 100%;
}  
 <div id="progress-containes">
  <div id="progress-bar">
    FOO
  </div>
</div>

Комментарии:

1. Да, но я придерживаюсь старой школы и предпочитаю столы. Страница не так часто перемещается во время рендеринга.