Имеется список из трех элементов:

            <ul>
                <li>Первый</li>
                <li>Второй</li>
                <li>Третий</li>
            </ul>

И для всех элементов списка задано такое правило:

ul li {display:table-cell; }

Необходимо установить для первого элемента списка ширину 20%, для второго элемента 30% и для третьего элемента 50%.

Как это проще сделать?

Вот при таком варианте работает только первый элемент:

ul li:first-child{width:30%; background-color: green; }
ul li:second-child{width:50%; background-color: #CF6; }
ul li:third-child{width:20%; background-color: #FF0; }