jquery UI tabs width 100%

Via CSS set:

.ui-tabs .ui-tabs-nav li {
    width:50%;
}

Note due to padding, margins, and borders you may need to reduce it to less than 50%.

Update: If you want to center the text in the tabs, you need to make two CSS changes (keeping the 50% change from above).

.ui-tabs .ui-tabs-nav li {
    width:50%;
    text-align: center;
}
.ui-tabs .ui-tabs-nav li a {
    display: inline-block;
    float: none;
    padding: 5px;
    text-decoration: none;
    width: 100%;
}

Note that you can tweak the padding as needed.


With Flexbox it's flexible and easier:

.ui-tabs .ui-tabs-nav {
    display: flex;
}

.ui-tabs .ui-tabs-nav li {
    flex: 1;
    display: flex;
    /* If placed in a small width sidebar or something like that disabling nowrap will fix the overflow issue */
    white-space: normal;
}

.ui-tabs .ui-tabs-nav li a {
    flex: 1;
    /* If you want to align tab titles center */
    text-align: center;
}

When the default jquery-ui tab is put on normal or larger width place

When it's put a on smaller width place