Таблица border-collapse + transform вызывает странную ошибку [duplicate]

$username = $_POST['username'];
$password = $_POST['password'];
$result = mysql_query("SELECT * FROM Users WHERE UserName LIKE '%$username%'") or die(mysql_error());

while($row = mysql_fetch_array($result))
{
    echo $row['FirstName'];
}

Иногда подавление запроса как @mysql_query(your query);

5
задан jan 18 November 2015 в 11:36
поделиться

1 ответ

Это поведение модели сжимающейся границы. Если для параметра border-collapse установлено значение collapse, ячейки разделяют границу с элементом edge, который является таблицей. Если оно установлено на separate, то ячейки имеют свою собственную границу.

Из этого ссылки: https://developer.mozilla.org/en/docs/Web/CSS/border -collapse

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

И из этой спецификации: http://www.w3.org/TR/CSS2/tables.html#border- разрешение конфликта

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

Вот почему, когда вы переводите ячейки, перемещаются только ячейки, потому что они не имеют собственных границ и только разделяют границы элемента edge (например, table).

Если вам действительно нужно преобразовать и переместить ячейки th, сохраните border-collapse как separate и управляйте границами на td ] / th индивидуально.

Что-то вроде этого:

table {
    border-spacing: 0px;
    border: 1px solid #333;
    background: #efefef;
    border-collapse: separate;
}

th,td { border: 1px solid #333; }
td { border-right: 0px; }
td:first-child { border-left: 0px; }
tbody > tr:last-child > td { border-bottom: 0px; }
th { background: #ccc; transform: translate(50px, 50px); }
<table>
    <thead>
        <tr>
            <th>Test 1</th>
            <th>Test 2</th>
            <th>Test 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>asdasd</td>
            <td>adasdasd</td>
            <td>adasdasd</td>
        </tr>
    </tbody>
</table>

8
ответ дан Abhitalks 27 August 2018 в 04:35
поделиться