Как выровнять блоки на всю ширину
 

хочу сделать так

<nav>
    <a>1</a>
    <a>2</a>
    <a>3</a>
</nav>

<style type="text/css">
    nav{
        display: table-row;
    }
    a{
        display: table-cell;
    }
</style>

чтобы было так

почему все так не логично, я хочу одно, делаю все ЛОГИЧНОЕ для этого а получаю не ожидаемое....

хочу чтобы <a> вели себя внутри <nav> как <td> ведут себя внутри <tr> , то есть делили всю ширину nav между собой

все ДОЛЖНО работать, но не работает.

Все логично. Твоя хрень ведет себя также как и таблица:

<nav>
    <a>1</a>
    <a>2</a>
    <a>3</a>
</nav>

<table>
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
</tr>
</table>

<style type="text/css">
    nav{
        display: table-row;
    }
    a{
        display: table-cell;
        border: 2px solid green;
    }
    table{
        border-spacing: 0;
    }
    td{
        border: 2px solid green;
    }
</style>

забыл уточнить про width: 100%

<nav>
    <a>1</a>
    <a>2</a>
    <a>3</a>
</nav>

<table>
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
</tr>
</table>

<style type="text/css">
    nav{
        display: table-row; 
        width: 100%;
    }
    a{
        display: table-cell;
        border: 2px solid green;
    }
    table{
        border-spacing: 0;
        width: 100%;
    }
    td{
        border: 2px solid green;
    }
</style>

при том я не хочу портить семантику добавляя что то вроде контейнера ДЛЯ СТРОКИ который имел бы дисплей table

короче как я понял это общеизвестная прблема и решена она с помощью "грид"

В новые фишки пока не вникал, но вроде да, проблему вроде решили. Меня самого бесят недостатки старых версий css, ибо я сам верстальщик.
Незнаю насколько это будет корректно работать, но можно для nav задать display: table и вроде работает (в хроме по крайней мере и на небольшом числе элементов)

<nav>
    <a>1</a>
    <a>2</a>
    <a>3</a>
</nav>
 
<table>
<tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
</tr>
</table>
 
<style type="text/css">
    nav{
        display: table;
        width: 100%;
    }
    a{
        display: table-cell;
        border: 2px solid green;
    }
    table{
        border-spacing: 0;
        width: 100%;
    }
    td{
        border: 2px solid green;
    }
</style>

danik.js,
вау, спасибо огромное, почему то даже не додумался... предполагал что надо в row ячейки класть

а как сделать их равными независимо от контента (при неизвестном количестве)?

<nav>
    <a>Суши</a>
    <a>Роллы</a>
    <a>Ассорти</a>
</nav>
 
<table>
<tr>
    <td>Суши</td>
    <td>Роллы</td>
    <td>Ассорти</td>
</tr>
</table>
 
<style type="text/css">
    nav{
        display: table;
        width: 100%;
    }
    a{
        display: table-cell;
        border: 2px solid green;
    }
    table{
        border-spacing: 0;
        width: 100%;
    }
    td{
        border: 2px solid green;
    }
</style>

width: 33%;

Опять же незнаю насчет кроссбраузерности, в хроме вроде все поровну:

<nav>
    <a>Суши</a>
    <a>Роллы</a>
    <a>Ассорти</a>
</nav>
  
<table>
<tr>
    <td>Суши</td>
    <td>Роллы</td>
    <td>Ассорти</td>
</tr>
</table>
  
<style type="text/css">
    nav{
        display: table;
        width: 100%;
        table-layout: fixed;
    }
    a{
        display: table-cell;
        border: 2px solid green;
    }
    table{
        border-spacing: 0;
        width: 100%;
    }
    td{
        border: 2px solid green;
    }
</style>

В случае чего можно еще попробовать добавить для ячейки width: 0 или наоборот, большое какое-нибудь число, или даже 100%, хотя фиг знает.